在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。