Question

我对d3.js（和一般的javascript）有点新鲜。我目前正在开发一棵类似于http://bl.ocks.org/robschmuecker/7926762中的树。我想添加一些过滤不包括某些节点。我不想隐藏它们，我希望它们不要在树上（因为不要弄乱间距等）。我认为这两个部分仅与从json文件中选择某些节点相关：

// define the baseSvg, attaching a class for styling and the zoomListener
var baseSvg = d3.select("#tree-container").append("svg")
    .attr("width", viewerWidth)
    .attr("height", viewerHeight)
    .attr("class", "overlay")
    .call(zoomListener);

也许

// Updating nodes
    var node = svgGroup.selectAll("g.node")
        .data(nodes, function(d) {
            return d.id || (d.id = ++i);
        });

Selecting only one json object in D3中有一个类似的问题，但我真的不明白如何使用这个答案。

Answer 1

从树中删除部分数据的最佳方法是在d3中对数据进行任何操作之前将其从数据数组中删除。

这意味着在我指出的点添加一些过滤代码：

// Get JSON data
treeJSON = d3.json("manyNodes.json", function(error, treeData) {

    // treeData is available here! Add filtering code...
    // ...

    // Calculate total nodes, max label length
    var totalNodes = 0;

有许多方法可以在Javascript中过滤数组，这与d3无关，所以超出了这个问题的范围，但这里有一个让你入门的例子：

假设您的JSON已经返回了这样的数组：

var treeData = [{name:'a', age:10}, {name:'b', age:20},
    {name:'c', age:30}, {name:'d', age:40}]

然后您可以按如下方式使用Array.filter：

> treeData.filter(function(d) { return d.age > 20; })

仅选择d3.select中的子集

1 个答案: