Question

继this question之后，我尝试将节点（包含圆圈和文本组）拖动为组合单位，而不是在我点击时首先跳到新位置。

我尝试将建议的技术应用到径向树布局（JSFIDDLE）中，但是我正在撞墙。我怀疑这是因为径向布局使用的x，y系统与通常的x，y系统不同。我一直试图rotate进入var drag，但似乎无法破解它。这是我应该关注的地方吗？感谢。

var drag = d3.behavior.drag()
    .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

这是因为在径向视图中使用了不同的x，y变换。我更改了拖动功能以获得正常的x，y坐标

    var drag = d3.behavior.drag()
    .on("drag", function(d,i) {
  var translateCoords = d3.transform(d3.select(this).attr("transform")); //gets the actual transform value
        d.x = translateCoords.translate[0]; // set x coordinate
        d.y = translateCoords.translate[1]; // set y coordinate
        d.x += d3.event.dx
        d.y += d3.event.dy
        d3.select(this)
          .attr("transform", function(d,i){
                return "translate(" + d.x + "," + d.y + ")"
            })
    });

以下是工作代码的jsfiddle link

d3 - 在径向树布局中拖动节点组，而不是在单击时跳转到新位置

1 个答案: