Question

我正在创建像this one here这样的d3可折叠Intented树，但我对节点崩溃的方式存在一些问题。

如果点击顶级，则没有问题。节点按原样崩溃。但是，如果单击一个级别，则单击的节点将成为主节点的位置，这是不正确的。

我能够重新创建问题并在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);
  // ...
}

Answer 2

我能够让它发挥作用。

在上面的小提琴例子中的第65行，我打电话给update(source)。变量source需要被合并到另一个可以在tree.nodes()部分的第72行调用的变量。

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

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

d3js：节点在我的树形图中没有正确折叠

2 个答案: