title: svg concatenate text of different styles
body: <p>I am using d3 to create an axis label inside an svg element. Part of the label is constant (string literal) and part of it varies as the user clicks around. To emphasize that it changes, I want it to be bold, while the rest of the text is normal weight. Aligning these two text elements, to each other and the rest of the drawing, has turned out to be quite difficult.</p>
  
  <p>Also, it seems trailing spaces in text elements are ignored, making it harder to do the concatenation. And if there's a way to change styles within a text element, that would work too.</p>
  
  <p>Here is a very hacky way of doing it, in that it won't work with three pieces of text (because <code>text-anchor</code>), and the result is hard to center (do I really need to go use <code>getBBox()</code>?).</p>
  
  <pre><code>function renderLabel(dynamicText){
       svg.select(".label").remove();
       var label = svg.append("g")
                      .attr("class", "label")
  
  
       label.append("text")
            .attr("text-anchor", "end")
            .text("The Axis is Based On ");
  
       label.append("text")
             .attr("text-anchor", "start")
             .style("font-weight", "bold")
             .attr("transform", "translate(6,0)") //space
             .text(dynamicText);
  }
  </code></pre>
  
  <p>In general, I would like to be able to append/concatenate any number of string variables, each with distinct styles, in a way that "looks good" as a sentence, and can be centered. Please tell me there's a better way to do it.</p>