我正在使用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存储桶中,而是宁愿将其以某种方式在代码中简单地转换为黑白图像。
这可能吗?在此先感谢!
答案 0 :(得分:4)
在您页面的某处添加以下过滤器定义。
<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>