css - D3. Within a text string how do I style substrings? -

for d3 chart have various labels. want color substrings within string different colors. how do this?

specifically have string:

75: oe 25 kd 35 cp 15 

i want oe, kd, , cp each have different colors.

put each piece in tspan , style accordingly:

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