d3js:节点在我的树形图中无法正确折叠

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

本文关键字：折叠 节点 我的 d3js      更新时间：2023-09-26

我正在创建一个像这样的 d3 可折叠意图树，但我在节点折叠方式方面遇到了一些问题。

如果单击顶层，则没有问题。节点按预期折叠。但是，如果单击向下一级，则单击的节点将占据主节点的位置，这是不正确的。

我能够重现问题并将其设置在 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);
});

任何帮助将不胜感激！谢谢！！

问题是您正在使用新源调用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);
  // ...
}

我能够让它工作。

在上面的小提琴示例中的第 65 行，我称之为 update(source).变量source需要断言到另一个变量，该变量可以在tree.nodes()部分中的第 72 行调用。

我用一个工作示例更新了这里的小提琴。

感谢@chazsolo帮助我排除故障！

相关文章：