javascript - d3js : Nodes don't collapse correctly in my tree diagram

Question

我正在创建一个 d3 可折叠意图树，例如 this one here ，但我对节点折叠方式遇到一些问题。

如果点击顶层，则没有问题。节点按其应有的方式折叠。但是，如果单击下一级，则单击的节点将成为主节点，这是不正确的。

我能够重现该问题并将其设置在 jsFiddle 中以供引用。我认为这与我使用 JSON.stringify 的点有关，但我不确定。这是特定的代码块。

d3.json("flare.json", function(flare) {
    flare.x0 = 0;
    flare.y0 = 0;

    console.log(flare);//Outputs flare.json

    //Takes the variable and exchanges the work "key" for "name" and "values" for "children"
    var source = JSON.parse(JSON.stringify(flare).replace(/"key":/g, '"name":').replace(/"values":/g, '"children":'))

    console.log(source);//From what I can tell, this also outputs flare.json

    update(source);
});

非常感谢任何帮助!谢谢!!

Answer 1

问题是您正在使用新源调用update，特别是您单击的元素

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

d 是您单击的元素，现在在更新函数中被引用为 source

function update(source) {
  // Compute the flattened node list. TODO use d3.layout.hierarchy.
  var nodes = tree.nodes(source);
  //...
}

要解决此问题，只需使用原始 json 对象 flare 而不是新的源...

function update(source) {
  // Compute ...
  var nodes = tree.nodes(flare);
  // ...
}