Graying out an image in D3js

问题

I'm using images as nodes in a D3js force directed graph. On a particular event, I want to gray-out this image. Is there a way to to achieve this?

I tried reducing opacity but it doesn't give the desired effect.

回答1:

Did you actually want to make it grayscale?

Borrowing from here.

// set up filter
svg.append('filter')
  .attr('id','desaturate')
  .append('feColorMatrix')
  .attr('type','matrix')
  .attr('values',"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0");

// then on the nodes to gray apply it
node.append("image")
  .attr("xlink:href", "https://stackoverflow.com/favicon.ico")
  .style("filter", function(d, i) {
      if (i % 2 == 0) {
        return ("filter", "url(#desaturate)");
      } else {
        return "";
      }
    });

Example here.

来源：https://stackoverflow.com/questions/27357917/graying-out-an-image-in-d3js