title: d3-graphviz: incorrect rendering if I use same graphviz renderer to draw slightly different graph multiple times
body: <p>I was using d3-graphviz to draw interactive graphs. I found that, somehow using the same graphviz renderer created at the beginning to re-draw new/updated graph leads to the wrong layout. For example, if I do the following steps, it would go wrong:</p>
  
  <ol>
  <li>Create the index.html, including the d3, d3-graphviz and viz we need to use.</li>
  <li>Use renderDot() function with specific callback.</li>
  <li>Call renderDot() again to draw another one, with multi-line, bold font label</li>
  <li>Render again with renderDot() to generate the same graph we have in step 2</li>
  </ol>
  
  <p>I am supposed to get at the very end, again:</p>
  
  <p><a href="https://i.stack.imgur.com/5zBD6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5zBD6.png" alt="expected graph"></a></p>
  
  <p>However Last step (step 4) results in a wrong layout graph. The nodes and edges won't be placed in the right positions:</p>
  
  <p><a href="https://i.stack.imgur.com/mORR9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mORR9.png" alt="wrong layout"></a></p>
  
  <p>Also note that, after step 3, if I click on the svg, it would shift upwards (one direction) a bit, which is also weird. After we clicking on it, it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/1glWf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1glWf.png" alt="shifted upwards after svg being clicked"></a></p>
  
  <p>Here are the source code:</p>
  
  <p><strong><em>index.html:</em></strong></p>
  
  <pre><code>&lt;!-- language: lang-html --&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;body&gt;
  &lt;script src=https://d3js.org/d3.v5.min.js&gt;&lt;/script&gt;
  &lt;script src=https://unpkg.com/viz.js@1.8.0/viz.js&gt;&lt;/script&gt;
  &lt;script src=https://unpkg.com/d3-graphviz@1.5.0/build/d3-graphviz.min.js&gt;&lt;/script&gt;
  
  &lt;!-- Main Graph --&gt;
  &lt;div id="graph" style="text-align: center;" height=3200px width=3200px&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong><em>render.js:</em></strong></p>
  
  <pre><code>&lt;!-- language: typescript --&gt;
  
  // please run below code step by step
  
  // create renderer
  x = d3.select('#graph').graphviz()
  
  // 1st rendering
  x.renderDot(`
  digraph {
      node [style="filled"]
      0 [id="0" label="honda::models"]
      1 [id="1" label="hidden"]
      2 [id="2" label="hidden"]
      0 -&gt; 1 [id="0-&gt;1" label=""]
      0 -&gt; 2 [id="0-&gt;2" label=""]
  }
  `, function() {
      d3.selectAll('text')._groups[0].forEach(function(e) {
          if (ans=/(.+?\: ).+/.exec(e.innerHTML)) {
              e.innerHTML = ans[0].replace(ans[1],
                  "&lt;tspan font-weight=bold&gt;" + ans[1] + "&lt;/tspan&gt;");
          }
      })
  });
  
  // 2nd rendering (bold and multi-line text label)
  x.renderDot(`
  digraph {
      node [style="filled"]
      0 [id="0" label="honda::models"]
      1 [id="1" label="name: fit\\linventory id: 007"]
      2 [id="2" label="hidden"]
      0 -&gt; 1 [id="0-&gt;1" label=""]
      0 -&gt; 2 [id="0-&gt;2" label=""]
  }
  `, function() {
      d3.selectAll('text')._groups[0].forEach(function(e) {
          if (ans=/(.+?\: ).+/.exec(e.innerHTML)) {
              e.innerHTML = ans[0].replace(ans[1],
                  "&lt;tspan font-weight=bold&gt;" + ans[1] + "&lt;/tspan&gt;");
          }
      })
  });
  
  // 3rd rendering
  x.renderDot(`
  digraph {
      node [style="filled"]
      0 [id="0" label="honda::models"]
      1 [id="1" label="hidden"]
      2 [id="2" label="hidden"]
      0 -&gt; 1 [id="0-&gt;1" label=""]
      0 -&gt; 2 [id="0-&gt;2" label=""]
  }
  `, function() {
      d3.selectAll('text')._groups[0].forEach(function(e) {
          if (ans=/(.+?\: ).+/.exec(e.innerHTML)) {
              e.innerHTML = ans[0].replace(ans[1],
                  "&lt;tspan font-weight=bold&gt;" + ans[1] + "&lt;/tspan&gt;");
          }
      })
  });
  </code></pre>
  
  <p>You can replicate it by creating the index.html, and then running the code in javascript step by step.</p>
  
  <p>Note: I've left the callback function there, which updates the font if it sees patterns "text: xxx" in each line. It makes no difference in the "hidden" case.</p>
  
  <p>Thanks!</p>