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

Question

我对JS和D3都很陌生,我用谷歌搜索了这一吨,但只发现了一些有点过于先进的例子.

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

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

以下是我到目前为止:http://jsbin.com/AXEFERo/5/edit

不需要花哨的东西,只需要了解如何创建连接器并让它们在拖动对象时动态更新.十分感谢!

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

在这里完成示例.还有其他更优雅的方法来实现这一目标.在实际应用程序中,您将拥有绑定到元素的数据,并可以使用它来区分不同的圆圈.