d3js：我的树图中的节点没有正确折叠答案

【问题标题】：d3js: Nodes don't collapse correctly in my tree diagramd3js：我的树图中的节点没有正确折叠
【发布时间】：2015-02-15 03:17:02
【问题描述】：

我正在创建一个像 this one here 这样的 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);
});

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

【问题讨论】：

标签： javascript json d3.js

【解决方案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);
  // ...
}

【讨论】：

感谢您的快速回复！我如何解决它？我需要在click() 之外拨打update() 吗？
它不是像我在小提琴中那样使用原版吗？因为正在创建source 以获取与key 一起使用的JSON 被name 替换，values 被children 替换。然后将其传递给update()，这将是原始源，正确的？还是我错过了什么？
我所做的唯一一件事就是将您的小提琴中的var nodes = tree.nodes(source); 更改为var nodes = tree.nodes(flare); 以使其正常工作，这也是您提供的示例的工作方式。您的其余代码似乎很好。
好的，这正是我所做的，但我没有得到任何回报。 This is what my fiddle looks like
你用的是什么浏览器？我刚刚尝试了最新的 Chrome，也没有任何显示。

【解决方案2】：

我能够让它工作。

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

我有一个工作示例updated the fiddle here。

感谢@chazsolo 帮助我解决问题！

【讨论】：