d3.js - 使用 D3 和 D3Plus 更改文本中的一种单词颜色

Question

我有以下代码：

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 来实现。

感谢您的时间和帮助。

Answer 1

此处提供的示例表明您可以在文本数据中使用一些标签 - 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;
}

我已经创建了您可以在 Codepen 上遵循的最小示例。