無法在d3佈局中顯示節點

Question

我在嘗試將我的可視化腳本更改爲更像Modifying a Force Layout Example。由於我沒有像a, b and c這樣的固定節點來添加我讀json file來填充nodes和links陣列。

d3.json("mock.json", function(error, json) { 
    if (error) 
     throw error; 
    nodes = nodes.concat(json.nodes); 
    links = links.concat(json.links); 
    start(); 
}); 

nodes和links有合適的尺寸，這意味着節點包含26 nodes和鏈接37 links。現在我想簡單地使用line和circle元素將它們可視化。

function start() { 
    link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; }); 
    link.enter().append("line").attr("class", "link"); 
    link.exit().remove(); 

    node = node.data(force.nodes(), function(d) { return d.id;}); 
    node.enter().append("circle").attr("class", "node").attr("r", 8); 
    node.exit().remove(); 
    force.start(); 
} 

這是非常類似於這個例子，我不明白爲什麼這不起作用。我提供a demo與模擬。有沒有問題，因爲我使用concat()而不是push()還是有什麼問題嗎？

Answer 1

您的代碼：

d3.json("mock.json", function(error, json) { 

    if (error) 
     throw error; 
    nodes = nodes.concat(json.nodes); 
    links = links.concat(json.links); 
    start(); 
}); 

必須是這樣的（原因其他force.nodes()將空數組初始設置）：

d3.json("mock.json", function(error, json) { 

    if (error) 
     throw error; 
    nodes = nodes.concat(json.nodes); 
    links = links.concat(json.links); 

    force.nodes(nodes); //else force.nodes() will be empty array set initially 
    force.links(links) 

    start(); 
}); 

下一頁：

您的編號：

link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; }); 

更正代碼：

link = link.data(force.links(), function(d) { return d.source + "-" + d.target; }); 

工作代碼here

希望這有助於！