Ajax d3.js按需加载数据以获取树的下一个节点
我试图在D3()中使用这个示例,它是一个扩展树。从所有示例中,我看到所有数据总是从单个JSON数据集加载的 我面临的问题是,数据可能深入到很多很多节点,JSON将是巨大的 当用户单击一个分支,然后将数据添加到集合并检查树分支时,有没有一种方法可以进行ajax调用 提前谢谢Ajax d3.js按需加载数据以获取树的下一个节点,ajax,d3.js,tree,onclick,expand,Ajax,D3.js,Tree,Onclick,Expand,我试图在D3()中使用这个示例,它是一个扩展树。从所有示例中,我看到所有数据总是从单个JSON数据集加载的 我面临的问题是,数据可能深入到很多很多节点,JSON将是巨大的 当用户单击一个分支,然后将数据添加到集合并检查树分支时,有没有一种方法可以进行ajax调用 提前谢谢 马特我在寻找一个与你非常相似的解决方案,并通过这样做解决了我的问题 在给定的示例()中,您有一个单击方法: // Toggle children on click. function click(d) { if (d.ch
马特我在寻找一个与你非常相似的解决方案,并通过这样做解决了我的问题 在给定的示例()中,您有一个
单击方法:
// 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来提取其子节点。我将返回的子对象推送到d.\u children
数组并运行正常逻辑(以及更新方法)
因此,您可以根据需要加载节点的子节点,而无需一个大的JSON文件。对我来说,这是一个很好的解决方案。多亏了,这个想法是从哪里来的。是的,你可以做到。您只需要使用新数据重新运行树布局。感谢您的回复。有什么例子吗?我不知道。