2013-08-16 36 views
1

我正在使用D3包装布局,我的数据非常大。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", ...) 

回答

3

下面是一个类似的情况的一个例子: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); 
} 

所有这一切都是隐藏孩子从你应用的任何分层布局。更新函数重绘层次结构,就好像这些隐藏层次不存在一样。