相关疑难解决方法(0)

我正在尝试使用d3框架为包含HTML文本和背景矩形的组实现拖动行为.我能够让它工作,虽然没有设置drag.origin我可以看到由于鼠标位置/元素坐标偏移引起的显着跳跃.究竟是如何在d3 wiki页面 上描述的虽然页面描述了如何设置拖动的Origin,但是我没有正确理解如何在我的例子中实现它.我尝试了两种不同的方法:使用元素将元素组合在一起并定义新元素保持tose.在第一种情况下,我必须使用translate-function,我甚至不知道如何获得组的坐标.

var svg = d3.select("body").append("svg")
  .attr("width", 960)
  .attr("height", 500);

var group = svg.append("svg:g")
  .attr("transform", "translate(10, 10)")
  .attr("id", "group");

var rect1 = group.append("svg:rect")
  .attr("rx", 6)
  .attr("ry", 6)
  .attr("x", 5/2)
  .attr("y", 5/2)
  .attr("id", "rect")
  .attr("width", 250)
  .attr("height", 125)
  .style("fill", 'white')
  .style("stroke", d3.scale.category20c())
  .style('stroke-width', 5);


var html1 = group.append("foreignObject")
  .attr("x", 50)
  .attr("y", 25)
  .attr("width", 200)
  .attr("height", 100)
  .attr("id", "fobject")
  .style("border-color", d3.scale.category20c())
  .append("xhtml:div")
  .style("font", "14px 'Helvetica Neue'")
  .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");

var innerSvg …

在v3中,我使用拖动原点来防止由于鼠标位置/元素坐标偏移引起的明显跳跃.在v4中是否有替代原因功能已被删除？

var drag1 = d3.behavior.drag()
            .origin(function () {
                var t = d3.select(this);
                return {
                    x: t.attr("x") + d3.transform(t.attr("transform")).translate[0],
                    y: t.attr("y") + d3.transform(t.attr("transform")).translate[1]
                };
            })
            .on("drag", function (d, i) {
                d3.select(this).attr("transform", function (d, i) {
                    return "translate(" + [d3.event.x, d3.event.y] + ")"
                })
            });

    var drag2 = d3.behavior.drag()
            .origin(function () {
                var t = d3.select(this);
                return { x: t.attr("x"), y: t.attr("y") };
            })
            .on("drag", function (d, i) {
                d3.select(this)
                .attr("x", d3.event.x)
                .attr("y", d3.event.y);
            });