ajax - d3.js 按需数据加载获取树的下一个节点

Question

我正在尝试在 D3 ( http://bl.ocks.org/mbostock/1093025 ) 中使用这个示例，它是扩展树。从所有示例中，我看到所有数据始终从单个 JSON 数据集加载。

我面临的问题是数据可能会深入到很多很多节点，而且 JSON 会很大......

有没有办法在用户点击一个分支时进行 ajax 调用，然后将数据添加到集合中并伸展树(Splay Tree)分支？

提前致谢

马特

Answer 1

我正在寻找与您非常相似的解决方案，并通过这样做解决了我的问题。

在给定的示例 ( http://bl.ocks.org/mbostock/1093025) 中，您有一个 click 方法:

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

我稍微改变了给定的一个:

 function click(d) {

          if (!d.children && !d._children) {

              var nameOfTheFile = d.jsonPath;
              var childObjects;

                 d3.json(nameOfTheFile, function(error, json) {

                    childObjects = json; 
                    childObjects.forEach(function(node) {
                            if(node.name != d.name){
                                (d._children || (d._children = [])).push(node);
                            }
                        });

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

                   }); 


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

  }

解释:我在我的节点中添加了一个属性，其中定义了一个 rest 服务 URL，该 URL 返回一个包含给定节点的子节点的 JSON 文件(您也可以在此处放置 JSON 文件本身的路径)。如果 click(d) 方法中的给定节点在他的数组中没有任何子节点，那么我会读取该属性并调用 URL 来提取他的子节点。返回的 child 我推送到 d._children 数组并运行正常逻辑(也是更新方法)。

因此您可以按需加载节点的子节点，而无需一个大的 JSON 文件。对我来说，这是一个非常好的解决方案。感谢Distributed json loading in force collapsable layout ，想法的来源。