title: Weird bug generating text with only the first of several SVGs on a page
body: <p>I have a page built in React that generates several plots in D3. The title text in the first plot, however, looks really ugly and distorted. Seen here:</p>
  <p><a href="https://i.stack.imgur.com/N0TD1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N0TD1.png" alt="Text distortion" /></a></p>
  <p>Notice how all the other text is perfectly fine. Also the plots further down the page are also perfectly fine. It only affects the title of the first plot generated with exactly the same code. Taking away bold doesn't help. Here's the code for the title:</p>
  <pre><code>svg.selectAll('text.title').data(blueCoords).enter().append('text')
              .attr('x', blueCoords[0] + 2 + gap / 2)
              .attr('y', plotDisplace)
              .attr('fill', 'black')
              .attr(&quot;font-family&quot;, '&quot;Montserrat&quot;, &quot;Helvetica&quot;, &quot;Arial&quot;, sans-serif')
              .attr(&quot;font-weight&quot;,&quot;bold&quot;)
              .text(chunkTitle)
  </code></pre>