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

d3 - drag node groups in radial tree layout without jumping to new position on click

本文关键字：新位置 位置 单击 布局 拖动 节点      更新时间：2023-09-26

从这个问题开始，我试图拖动节点(包含圆圈和文本组)作为组合单位，而不是在我单击时首先跳到新的位置。

我已经尝试将建议的技术实现到径向树布局(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 + ")"
            })
    });

这是因为在径向视图中使用了不同的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的工作代码链接

相关文章：