Javascript D3.js对象之间的动态连接器

我对JS和D3都很陌生，我在谷歌上搜索了一吨，但只找到了一些太高级的例子

我正在做一个简单的决策图实现，我一直在尝试用一条线/路径连接两个节点。可以使用鼠标移动对象，并且路径应始终更新以反映对象的位置

这是我的基本知识来源，但我不太明白如何用它做一些聪明的事情

以下是我到目前为止的情况：

---

不需要花哨的东西，只需要了解如何创建连接器，并在拖动对象时动态更新连接器。非常感谢

要在两个圆之间画一条线，您不需要任何特殊的东西——只需要

行

元素

var line = svg.append("line")
        .style("stroke", "black")
        .attr("x1", 150)
        .attr("y1", 100)
        .attr("x2", 250)
        .attr("y2", 300);

动态更新位置有点困难。目前，您无法区分哪些圆正在被拖动。一种方法是向

g

元素添加一个区别类

var g1 = svg.append("g")
        .attr("transform", "translate(" + 150 + "," + 100 + ")")
        .attr("class", "first")
        ...

另一个也一样。现在，您可以在

dragmove

函数中打开该类，并更新直线的起点或终点坐标

if(d3.select(this).attr("class") == "first") {
            line.attr("x1", x);
            line.attr("y1", y);
} else {
            line.attr("x2", x);
            line.attr("y2", y);
}

---

完整的例子。还有其他更优雅的方法来实现这一点。在实际的应用程序中，您可以将数据绑定到元素，并可以使用它来区分不同的圆。

太好了，这正是我想要的基础！“更优雅的方式”，他们会有相似的原则，还是完全不同？你有任何与此相关的链接或关键字吗？再次感谢……原则是一样的。请看一个更高级的例子。@Larskothoff这是一个干净而有用的例子，但我不明白为什么在这里使用g元素。为什么不直接使用圆圈来添加类等？因为这种方法意味着每个元素有一个组，这也就消除了组的整个点，不是吗？这里可能暗指最佳实践，但我看不出来。请您发表意见好吗？@sarikan您是对的，在这个特定的例子中，没有必要对组进行修改，您可以只使用圆圈。@Larskothoff非常感谢您的及时回复！