0

I'm trying to take a d3-generated SVG text element and add styles (bold and colors) to some of the individual words in it. (Edited to add:) A previous function divides the text into a few tspan elements to wrap the text onto multiple lines. I've tried adding tspan elements to the code like this:

const caption1 = bounds.append("text")
    .attr("x", 10)
    .attr("y", 10)
    .html("There are about <tspan>1600</tspan> giant pandas in the wild")

And then calling out in the stylesheet:

tspan { 
    font-weight: 700;
}

Adding the tspan styles in CSS adds the styles to the entire caption, (edited to add:) because the entire caption is made up of tspans, instead of to just the 1 word that I'm trying to do.

I've also tried adding the style elements inline and it hasn't created any result:

const caption1 = bounds.append("text")
    .attr("x", 10)
    .attr("y", 10)
    .html("There are about <tspan fill=red>1600</tspan> giant pandas in the wild")
bcwg
  • 15
  • 5
  • What you have in your first try should work. Is there any other css that might be causing the problem? – SmokeyShakers Jan 03 '20 at 20:10
  • @SmokeyShakers oh, yes. I have a previous function that wraps the text onto multiple lines, dividing it up into 3 tspan elements. That explains why the tspan css affects the entire caption. Is there a way to identify only a certain tspan element to then apply styles to it? I tried adding a class to differentiate it and that didn't work. – bcwg Jan 03 '20 at 20:16
  • You could give your bold tspan a class then use `tspan.yourclass { font-weight:700;}` in your css – SmokeyShakers Jan 03 '20 at 20:18
  • @SmokeyShakers I'm trying `.html("There are about 1600 giant pandas in the wild")` and then calling `tspan.highlight {...` in css but it's not working. Is that because the tspan is created in d3? – bcwg Jan 03 '20 at 20:30
  • You can't use double quotes again in `class="highlight"` You'll end and restart the string. Try `class='highlight'` works for me – SmokeyShakers Jan 03 '20 at 20:33
  • @SmokeyShakers It works now! Thank you – bcwg Jan 03 '20 at 20:43

0 Answers0