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.