1

我正在使用 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", ...)
4

1 回答 1

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

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

于 2013-08-16T16:59:15.217 回答