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

【问题标题】：D3.js Dynamic connector between objectsD3.js 对象之间的动态连接器
【发布时间】：2013-09-07 11:19:31
【问题描述】：

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

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

这是我的基本知识来源：https://github.com/mbostock/d3/wiki/SVG-Shapes，但我不太明白如何用它做一些聪明的事情。

这是我目前所拥有的：http://jsbin.com/AXEFERo/5/edit

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

【问题讨论】：

标签： javascript svg d3.js connector

【解决方案1】：

要在圆圈之间画一条线，您不需要任何特殊的东西 - 只需 line 元素。

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);
}

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

【讨论】：

太棒了，只是我想要的基础知识！ “更优雅的方式”，他们会有相似的原则还是完全不同？您有与此相关的任何相关链接或关键字吗？再次感谢...
原理是一样的。查看the force-directed layout 以获得更高级的示例。
@LarsKotthoff 这是一个干净而有用的例子，但我不明白你为什么在这里使用 g 元素。为什么不直接使用圆圈先添加类等？因为这种方法意味着每个元素都有一个组，这也有点消除了组的全部意义，不是吗？这里可能隐含了对最佳实践的引用，但我看不到。你能评论一下吗？
@sarikan 你说得对，在这个特定的例子中不需要组，你可以只使用圆圈。
@LarsKotthoff 非常感谢您的及时回复！