D3.js按需数据加载以获取树的下一个节点

Question

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

我面临的问题是，数据可能会向下钻取到许多节点，而 JSON 将是巨大的......

当用户单击分支，然后将数据添加到集合并扩展树分支时，有没有办法进行 ajax 调用？

提前致谢

马 特

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，它向我返回一个包含给定节点子节点的 JSON 文件（在这里您还可以放置 JSON 文件本身的路径）。如果 click(d) 方法中的给定节点在他的数组中没有任何子节点，那么我读取该属性并调用 URL 来提取他的子节点。返回的子项我推送到d._children数组并运行正常逻辑（也是更新方法）。

因此，您可以按需加载节点的子节点，而无需一个大的 JSON 文件。对我来说，这是一个非常好的解决方案。感谢分布式 json 加载在强制可折叠布局中，这个想法来自哪里。