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

希望这会有所帮助！