无法在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

希望这有助于！