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

希望这有帮助！

无法在d3强制布局中可视化节点

1 个答案: