d3点击时拖动到其他位置 - 原点？

Question

试图拖动组。 为什么起源不起作用？ 注意第一次点击它时它是如何跳跃的？ 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

你正在混合不同的设置位置的方法 - 你在on the circles, but not on the设置transform和cx和cy on the circles, but not on the elements that you want to drag. While it can be made to work by computing the various offsets, it's much easier if you set the position for the things you're interested in (ie the on the circles, but not on the g elements that you want to drag. While it can be made to work by computing the various offsets, it's much easier if you set the position for the things you're interested in (ie the elements that you want to drag. While it can be made to work by computing the various offsets, it's much easier if you set the position for the things you're interested in (ie the g`元素） elements that you want to drag. While it can be made to work by computing the various offsets, it's much easier if you set the position for the things you're interested in (ie the并且调用拖动行为elements that you want to drag. While it can be made to work by computing the various offsets, it's much easier if you set the position for the things you're interested in (ie the则更容易。

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

在这里完成示例。