[英]D3 trim hierarchical data by depth?
我正在使用D3包布局,我的数据非常大。
所以问题是数据太大而无法顺利渲染。 我希望通过它的深度来修剪数据,但我完全不知道如何做到这一点。
我唯一能想到的是编写一个递归函数来修剪每个新鲜的整个数据。
[psudo]
trim = function(node, depth){
if ( depth == 0 ) return null;
foreach(node.child) node.child = trim(node.child, depth - 1);
}
但我认为必须有办法在这里处理它:
vis.selectAll("circle")
.data(nodes)
.enter().append("svg:circle")
.attr("class", ...)
以下是类似案例的示例: http : //bl.ocks.org/mbostock/4339083
数据集不大,但处理方法与您的方法类似。 首次加载分层数据时,通过折叠根的所有后代来修改它。 这里只留下根。 在您的情况下,您可以选择最初打开其他级别。 请参阅下面的递归折叠函数:
d3.json("/d/4063550/flare.json", function(error, flare) {
root = flare;
root.x0 = height / 2;
root.y0 = 0;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
});
然后,随着用户向下钻取(这里响应节点单击,在您的情况下可能响应其他内容),每个节点都会相应地进行调整:
// 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);
}
所有这一切都隐藏了孩子们应用的任何层次布局。 更新功能重新绘制层次结构,就好像那些隐藏的级别不存在一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.