I want to use this example http://bl.ocks.org/mbostock/1093130
我想使用这个示例http://bl.ocks.org/mbostock/1093130
Link is Collapsible Force Layout
and load all nodes from JSON in first loading.
Link是可折叠的强制布局,在第一次加载时从JSON加载所有节点。
Question:
问题:
I want to load child after click parent's node and expand after click.
我想在单击父节点后加载子节点,单击后展开。
When collapse each node, destroy all nodes are as child.
当折叠每个节点时,销毁所有节点作为子节点。
How to implement idea?
如何实现主意吗?
Note: my graph is huge and web browser doesn't respond to load. Now I want to load/destroy data gradually.
注意:我的图表很大,web浏览器不响应加载。现在我想逐渐加载/销毁数据。
1
You have to do it like this:
你必须这样做:
On click of the node fetch the children associated with the node:
单击节点获取与节点关联的子节点:
function getMyData(d) {
//return the url for the parent node.
if (d.name == 'graph') {
return "https://gist.githubusercontent.com/cyrilcherian/231657f6c86d540adf64/raw/375f89aaa65d16bbbda904c7f17a132face1a7d6/graph_children.json";
} else if (d.name == 'cluster') {
return "https://gist.githubusercontent.com/cyrilcherian/dbf9f0b2180201e4cdbe/raw/a7e6361349fe06b6c16f7f376d07dae36da89848/cluster_children.json";
} else if (d.name == 'analytics') {
return "https://gist.githubusercontent.com/cyrilcherian/0efc76bd75386bf89961/raw/5d32ea77f1d34e8ca40f749ce9d501669e8563a4/analytic_children.json";
} else if (d.name == 'flare') {
return "https://gist.githubusercontent.com/cyrilcherian/b9bcb0fdc398bd691641/raw/11a79edf99511cf040ffcb98ae9c30895798ae5e/flare.json";
} else
return [];
}
// Toggle children on click.
function click(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (d.children) {
d.children = null;
update();
} else {
//do your ajax call to get the chldren
var url = getMyData(d);
d3.json(url, function(error, json) {
d.children = json;
update();//update on ajax success.
})
}
}
Here these are my ajax calls to load its children based on the parent node "https://gist.githubusercontent.com/cyrilcherian/b9bcb0fdc398bd691641/raw/11a79edf99511cf040ffcb98ae9c30895798ae5e/flare.json"
这里是我基于父节点“https://gist. githuercontent.com/cyrilcherian/b9bcb0fdc398bcbd691641/raw/11a79edf99511cf9fcb98ae9c30895798808ae5e/flare.json”加载子节点的ajax调用。
Working code here
工作代码在这里
You need to click the flare/cluster/graph/analytics node to load its children via ajax.
您需要单击flare/cluster/graph/analytics节点以通过ajax加载其子节点。
Hope this helps!
希望这可以帮助!
本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2016/02/06/720275bd0ccedcefd495f1ffe3d3cade.html。