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

Question

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

具体来说我有一个字符串：

75: OE 25 KD 35 CP 15

我希望OE，KD和CP各有不同的颜色。

Answer 1

将每件作品放入tspan并相应地设定样式：

＆＃13;

＆＃13;

.redText{
  fill: red
}

.blueText{
  fill: steelblue
}

.greenText {
  fill: green
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;