CODEWITHSUNDEEP
d3.jsd3plus
Bruno Quaresma
Bruno Quaresma

Reputation: 10697

Change one word color in a text using D3 and D3Plus

I have the following code:

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

But, I would like to change "@MapboxUnion" to be blue but I have no idea how to achieve this using D3.

Thanks for your time and help.

Upvotes: 0

Views: 78

Answers (1)

MaxStarka
MaxStarka

Reputation: 91

Example provided here says that you can use some tags inside of your text data - b, strong and i specifically.

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` },
  ];

Then you can use normal CSS to style it:

#wrap tspan{
  fill: blue;
}

I've created minimal example you can follow on Codepen.

Upvotes: 1

Related Questions