如何在 D3 Javascript 中繪制一個簡單的力有向圖

Question

我正在關注本教程：> http://bl.ocks.org/mbostock/4062045用於在 D3 Javascript 中可視化力有向圖。 上面的鏈接也有代碼和 JSON 文件。 我有兩個問題。 節點是如何鏈接的？ 這是鏈接和節點及其位置的代碼：

force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

node.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
});

我的第二個問題：誰能幫我畫一個兩個節點（圓圈）和這兩個節點之間的一個鏈接的樣本，這樣我就可以理解這個圖是如何工作的。 非常感謝您的幫助。

Answer 1

兩個節點是否鏈接由數據決定。 特別是，它包含諸如

{"source":1,"target":0,"value":1}

它告訴它鏈接哪些節點（通過索引）。 索引是指數據中也給出的節點列表。 此數據在此塊中提供給 D3：

var link = svg.selectAll(".link")
    .data(graph.links)
  .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.value); });

所以對於graph.links每個元素，都會添加line 。 此時，該線沒有起點或終點，因此未繪制——僅添加了元素。 然后，在模擬運行時，根據模擬的當前狀態設置線的起點和終點。 這是您在問題中的代碼。

以下代碼將繪制兩個圓圈和它們之間的鏈接。

var svg = d3.select("body").append("svg").attr("width", 100).attr("height", 100);
svg.append("circle").attr("cx", 10).attr("cy", 10);
svg.append("circle").attr("cx", 90).attr("cy", 90);
svg.append("line").attr("x1", 10).attr("y1", 10).attr("x2", 90).attr("y2", 90);