javascript - 无法可视化 d3 力布局中的节点

Question

我正在尝试将我的可视化脚本更改为更像 Modifying a Force Layout Example 。由于我没有像 a、b 和 c 这样的固定节点来添加，所以我读取了 json 文件 来填充 节点 和 链接数组。

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

节点和链接具有正确的大小，这意味着节点包含26个节点和链接37个链接。现在我想简单地使用 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

希望这有帮助!