在D3js中将图像变灰

问题描述

我将图像用作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.

推荐答案

您实际上是否要使其成为灰度?

Did you actually want to make it grayscale?

从此处借用.

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

示例此处.

这篇关于在D3js中将图像变灰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！