在 D3js 中使图像变灰

Question

我在 D3js 力有向图中使用图像作为节点。在特定事件中，我想将此图像变灰。 有没有办法做到这一点？

我尝试降低不透明度，但效果不佳。

Answer 1

你真的想把它变成灰度吗？

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

例如here。