javascript - D3.js 上的搜索功能

Question

我想在 D3.js 中为我的所有圈子创建一个搜索功能。问题是我无法从文本框中选择特定项目，但我可以选择所有项目来隐藏它们。其他问题，搜索项目以隐藏它是一个好的解决方案吗？这是我隐藏项目的功能:

function myFunction(){
    var myBubble = document.getElementById("targetNode").value;
    var theNode = d3.select(myBubble.id);
        d3.selectAll("circle").style("opacity","0");
        d3.selectAll("text").style("opacity","0");
        theNode.style("opacity","1");
}

这是该问题的在线示例:https://plnkr.co/edit/tFgMhomgn2sKazK674Kl?p=preview非常感谢!

Answer 1

先选择所有节点，然后选择 filter通过比较绑定(bind)到节点的数据来找到所需的数据:

function hideItem(){
    var itemName = document.getElementById("targetNode").value;
    var theNode = d3.selectAll(".node")
                    .filter(function(d) { return d.className === itemName });
    d3.selectAll(".node").style("opacity","0");
    theNode.style("opacity","1");
}

https://plnkr.co/edit/pF4EYzE4V3x4T5KMILEM