Javascript D3在SVG上拖动“；路径“；定义d.x时元素断裂，隐藏基准？

我是D3/Javascript的初学者

我有一个工作的D3脚本，其中绘制了一组

path

元素，可以在其中拖动

但是，当我在其他地方添加看似不相关的代码时，设置数据的

d.x

和

d.y

（顺便说一句）拖动中断。元素会跳跃，因此它从一段距离开始，需要拖回其原始位置

（不希望出现的“跳跃”是有序的，与鼠标坐标的线性变换一致）

导致这种行为的“违规”代码是：

hexdata.forEach(function(d) {
        d["x"] = grid_x(d);
        d["y"] = grid_y(d.grid_y);
      });  

在没有上述代码的情况下，构造节点和路径的代码为：

var node = svg.selectAll('g') 
        .data(hexdata) 
        .enter()
        .append("g")
        .call(d3.drag()
            .on("drag", dragged))
        .attr("class", "node");


node.append('path') 
    .attr("d", function (d) {
        hex_alignment = (d.grid_y%2==1) ? hexRadius : 0
        return "M" + (d.x *hexRadius*2 + 100)  + "," + ((d.y*1.75 +100)) + hexPath; 
    })

function dragged(d) {
    d3.select(this).attr("transform", "translate(" + d3.event.x + "," + d3.event.y   + ")");
}

有人知道发生了什么吗？

如前所述，设置原点（v3）/主题（v4）将解决此问题

但是，如果您不想（出于任何原因）在拖动函数中设置原点（v3）/主题（v4），只需更改其他属性的名称，如

a

和

b

。我们知道，

x

和

y

是命名坐标的最常见选择，但它会导致拖动函数中出现冲突（由于您说您是初学者，因此其解释超出了本文的范围）

这很容易表现出来。下面是一个简单的代码，使用

x

和

y

，拖动圆圈：它将跳转

var svg=d3.选择（“svg”）；
var circle=svg.append（“circle”）
.基准({
x:150，
y:75
})
.attr（“transform”，d=>“translate”（“+d.x+”，“+d.y+”））
.attr（“r”，10）
.call（d3.drag（）
.打开（“拖动”，拖动））
函数（d）{
d3.选择（this.attr）（“transform”、“translate”（+d3.event.x+）、“+d3.event.y+”）；
}

svg{
边框：1px纯色灰色；
}

在

d3中拖动
如果您使用的是v3版本，则需要设置
原点。或主题（如果您使用的是d3 v4版本）。这可能会有帮助，太好了！这似乎有效，谢谢！我添加的全部内容是：
.subject（function（）{var t=d3.select（this）；return{x:t.attr（“x”），y:t.attr（“y”）}；}）
我看到的所有示例中都没有提到这一点。似乎是一个陷阱，尤其是因为代码是如此的空洞。谢谢！您是否介意简要解释一下为什么触摸
x'和
y`属性会有如此大的问题？我还想了解D3中应该注意的任何其他“幕后”行为。当然。解释有点复杂，因为它涉及到源代码。我很快就会进行演示。