d3.js - 将带有背景图像的svg rect转换为黑白

Question

我正在使用 d3 / svg 创建运动队徽标的散点图，并且有兴趣将某些徽标制作成黑白。在这里（不要担心不遵循所有变量）是我绘制徽标的几行代码。

logoMarkers
        .enter()
        .append('rect')
        .attr('transform', d => `translate(${(xScale(+d[xOption.value][xOption.objKey]) - 0.5 * logoRadius)}, ${(yScale(+d[yOption.value][yOption.objKey]) - 0.5 * logoRadius)})`)
        .attr('x', 0).attr('y', 0)
        .attr('height', logoRadius)
        .attr('width', logoRadius)
        .attr('fill', d => `url(#teamlogo-${d.teamId})`)
        .attr('cursor', 'pointer')
        .attr('opacity', d => this.props.focusTeam === 'none' ? 1 : (d.teamId === this.props.focusTeam ? 1 : 0.20));

...此代码使除 Duke 徽标之外的所有徽标都具有 0.20 的不透明度，但是我也想将非 Duke 徽标设置为黑色和白色。这可能吗？我宁愿不必在我从中提取图像的 s3 存储桶中实际保存黑白版本的徽标，而是更愿意在我的代码中以某种方式简单地将图像转换为黑白版本。

这可能吗？提前致谢！！

标签： d3.jssvg

Answer 1

在您的页面某处添加以下过滤器定义。

<filter id="saturate">
  <feColorMatrix type="saturate" values="0"/>
</filter>

然后将以下内容添加到非 Duke 元素中。

.attr('filter', 'url(#saturate)')

例子：

<svg>
  <defs>
    <filter id="saturate">
      <feColorMatrix type="saturate" values="0"/>
    </filter>
  </defs>

  <circle cx="75" cy="75" r="75" fill="red" filter="url(#saturate)"/>
  <circle cx="150" cy="75" r="75" fill="green" filter="url(#saturate)"/>
  <circle cx="225" cy="75" r="75" fill="blue" filter="url(#saturate)"/>
</svg>