javascript - d3js 在编码解码数据后工作

Question

我正在使用 d3js 和 hierarchical layout 进行数据可视化.我的数据如下所示:

       0
     / | \
    /  |  \ 
   1   5   3
    \  |   |
     \ |   |
       4  /
       | /
       2

因为我无法链接到多个父级，所以我复制了显示的节点:

       0
     / | \
    /  |  \ 
   1   5   3
   |   |   |
   |   |   |
   4   4   |
   |   |   |
   2   2   2

我做了一个 fiddle demo显示我的问题:

• 当我在我的 JSON 输入中使用正确的数据时，我的布局很好(带蓝色边框的图形)。
• 当我使用循环来解析我的 JSON 输入时，我得到了奇怪的图形(带绿色边框的图形)。

这是我用来解析输入的循环:

for (i in root[2].Arcs){
  var d = root[1].Nodes[root[2].Arcs[i].D];
  var s = root[1].Nodes[root[2].Arcs[i].S];
  if (!d.children){
    d.children = [];
  }
  d.children.push(s);
}

对我来说:控制台中的两个打印元素是相同的，但布局的渲染不同。对象引用可能有一些不同。

我发现一个不好的解决方案是解码然后编码我的 var:

    var root = JSON.parse(JSON.stringify(root));

然后脚本运行良好。但是我的root是一个long long数组，解析需要很长时间...

有什么想法可以解释为什么我需要使用编码/解码来显示相同​​的东西吗？

谢谢

Answer 1

您可以用类似的东西替换您的 for 循环，但不知道性能如何。 jsfiddle

traverse(root[1].Nodes[0]);
function traverse(node) {
    for (i in root[2].Arcs) {
        var d = root[1].Nodes[root[2].Arcs[i].D];
        if (node.name === root[2].Arcs[i].D) {
            var s = root[1].Nodes[root[2].Arcs[i].S];
            var sCopy={
                "name": s.name
            }
            traverse(sCopy);
            if (!node.children) {
               node.children = [];
            }
            node.children.push(sCopy);
        }
    }
}