javascript - 单击时 d3 拖动跳转到其他位置 - 原点？

Question

尝试拖动组。为什么 origin 在这里不起作用？注意到当你第一次点击它时它是如何跳跃的吗？ JSFIDDLE基于此:http://bl.ocks.org/mbostock/1557377

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

Answer 1

您正在混合设置位置的不同方式 -- 您在圆圈上设置 transform 和 cx 和 cy，但不在 code>g要拖动的元素。虽然它可以通过计算各种偏移量来工作，但如果您为您感兴趣的东西(即 g` 元素)设置位置并调用拖动行为，就会容易得多。

var svgG = svg.append("g")
  .attr("transform", function(d) { return "translate(" + [ d.x,d.y ] + ")"; })
  .call(drag);

完整示例 here .