javascript - 在 d3.select 中只选择一个子集

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