Search function on D3.js

Question

I would like to create a Search function for all my circle in D3.js. The problem is I can't select a particulary item from my textbox but I can select all items for hide them. Other question, is it a good solution to search an item to hide it ? This is my function to hide item :

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

This is an online example of the problem : https://plnkr.co/edit/tFgMhomgn2sKazK674Kl?p=preview Thanks a lot !

Answer 1

Select all nodes first and then filter the desired one by comparing the data bound to the node:

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