使用 D3 和 D3Plus 更改文本中的一种文字颜色

编程问答 2022-04-24

问题描述

我有以下代码：

var data = [
    { text: `Notice also:  @MapBoxUnion isn't "MapBox TECH Workers Union". We're organizing all of our US employees. Sales,Support,Engineering,Design... When we say we want to improve life for fellow MapBoxers,we mean all of them` },];

new d3plus.TextBox()
    .data(data)
    .select("#container")
    .fontSize(16)
    .height(100)
    .width(400)
    .render()

但是，我想将“@MapBoxUnion”更改为蓝色，但我不知道如何使用 D3 来实现这一点。

感谢您的时间和帮助。

解决方法

提供的示例 here 表示您可以在文本数据中使用一些标签 - 特别是 b、strong 和 i。

var data = [
    { text: `Notice also:  <b>@MapboxUnion</b> isn't "Mapbox TECH Workers Union". We're organizing all of our US employees. Sales,Support,Engineering,Design... When we say we want to improve life for fellow Mapboxers,we mean all of them` },];

然后你可以使用普通的 CSS 来设置它的样式：

#wrap tspan{
  fill: blue;
}

我创建了您可以关注的最小示例on Codepen。

d3plus