Question

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

Answer 1

以下是类似案例的示例：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);
}

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

D3按深度调整分层数据？

1 个答案: