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

在這里完成示例。 還有其他更優雅的方法來實現這一目標。 在實際應用程序中，您將擁有綁定到元素的數據，並可以使用它來區分不同的圓圈。