d3.js force directed graph search

Question

I am trying to implement a search function on a d3 force directed graph example. When I type in the search query in the text field, relevant items will be shown and the irrelevant ones will fade out.

I have implemented the methods searchUpdate and count as shown in the following jsfiddle .

I need some help to fade the items. Currently d3.select("svg") fades the whole graph, while d3.select("#"+n.id) produces an error.

Answer 1

When you d3.select("svg") you're selecting the SVG canvas and setting its opacity . What you want to do is

    d3.selectAll("circle") 

or

   d3.selectAll("circle.node") 

and apply the opacity there.

Then what you want to do is select the circles that match by ID using d3.select("#"+n.id) but to do so you'll have to create an id when you create the circles, like

  .attr("id", function(d,i) {return "circle"+i})

Otherwise you don't have an id to select with.