D3。在文本字符串中如何设置子字符串的样式？答案

【问题标题】：D3. Within a text string how do I style substrings?D3。在文本字符串中如何设置子字符串的样式？
【发布时间】：2015-07-14 02:49:49
【问题描述】：

对于 D3 图表，我有各种标签。我想用不同的颜色为字符串中的子字符串着色。我该怎么做？

特别是我有一个字符串：

75: OE 25 KD 35 CP 15

我希望 OE、KD 和 CP 具有不同的颜色。

【问题讨论】：

尼尔斯，你为什么觉得有必要干涉我给一个问题的标题？严重烦人，请不要再这样做了。通过使用 D3 进行探索，这有助于访问者识别我所指的上下文。 D3。 JS。 C++，随便。您的编辑放弃了这种特殊性。
这就是标签的用途。关于 SO 的共识是不在标题中包含标签。您可能需要查看常见问题解答部分 "Should questions include “tags” in their titles?" 和 "How do I write a good title?" 以获取相关说明。
我不想对细节进行冗长的讨论。标题是标题。网络是一种扫描媒介。纳夫说。

标签： css svg d3.js

【解决方案1】：

将每个部分放入tspan 并相应地设置样式：

.redText{
  fill: red
}

.blueText{
  fill: steelblue
}

.greenText {
  fill: green
}

<svg>
  <text x="20" y="20">
    <tspan>75</tspan>
    <tspan class="redText">OE</tspan>
    <tspan>25</tspan>
    <tspan class="greenText">KD</tspan>
    <tspan>35</tspan>
    <tspan class="blueText">CP</tspan>
    <tspan>15</tspan>
  </text>
</svg>

【讨论】：

是的！完美的。干杯马克。