d3.js按需数据加载以获取树的下一个节点 [英] d3.js on-demand data loading to get the next node for a tree

问题描述

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

I am trying to use this example in D3 (http://bl.ocks.org/mbostock/1093025), which is the expanding tree. From all the examples I see all the data is always loaded from a single JSON dataset.

我面临的问题是，数据可能会深入到许多节点中，而JSON将会非常庞大​​...

The issue I am facing is that the data could potentially drill down into many, many nodes and the JSON would be huge...

当用户单击分支然后将数据添加到集合中并扩展到树分支时，是否可以进行ajax调用?

Is there a way to make an ajax call when the user clicks on a branch and then add the data to the set and exapnd the tree branch?

预先感谢

马特

推荐答案

我正在寻找像您这样的非常相似的解决方案，并以此解决了我的问题.

I was searching for a very similar solution like you and solved my problem by doing this.

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

In the given example (http://bl.ocks.org/mbostock/1093025) you have a click method:

// 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);
}

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

I changed the given one a bit:

 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来提取其子代.我将返回的子级推入d._children数组并运行常规逻辑(也是update方法).

Explanation: I have added a property to my node where the a rest service URL is defined which returns me a JSON file with the children of the given node (Here you can also place the path to the JSON file itself). If the given node in the click(d) method does not have any children in his array then I read the property and call the URL to extract his children. The returned children I push to the d._children array and run the normal logic (also the update method).

因此，您可以按需加载节点的子节点，而无需一个大的JSON文件.对我来说，这是一个很好的解决方案.多亏了在强制可折叠布局中进行分布式json加载，来自.

So you can load the childs of a node on demand without having one big JSON file. For me it is a very good solution. Thanks to Distributed json loading in force collapsable layout, where the idea comes from.

这篇关于d3.js按需数据加载以获取树的下一个节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！