title: d3 svg path attr d assignment fails in Jupyter Notebook
body: <p>In working on a directed graph visualization in d3 I followed <a href="https://stackoverflow.com/users/368214/mgraham">Martin Graham's</a>  jsfiddle <a href="http://jsfiddle.net/a5ua66zy/2/" rel="nofollow noreferrer">example here</a> to create bezier arcs for multiple links between two nodes. This worked a treat and I'm grateful for his guidance. The current state of development of my working example can be seen <a href="http://neolography.com/staging/d3v5digraphTest.html" rel="nofollow noreferrer">here</a>. The d3 code is right in the HTML in <code>&lt;script&gt;</code> tags. The function for generating those arcs looks like this:</p>
  <pre><code>  function linkArc(d,i,lnks) {
      var dx = d.target.x - d.source.x,
          dy = d.target.y - d.source.y;
      var qx = dy /  6 * d.linknum,
          qy = -dx / 6 * d.linknum;
      var qx1 = (d.source.x + (dx / 2)) + qx,
          qy1 = (d.source.y + (dy / 2)) + qy;
  
      return `M${d.source.x} ${d.source.y}
              C${d.source.x} ${d.source.y}, ${qx1} ${qy1}, ${d.target.x} ${d.target.y}`;
    };
  </code></pre>
  <p>And it is called from within the <code>drawGraph</code> function like this:</p>
  <pre><code>simulation.on(&quot;tick&quot;, () =&gt; {
      link.attr(&quot;d&quot;, linkArc);
      ...etc...
   
  </code></pre>
  <p>Well and good, this works. But what I'm aiming at is deploying this visualization in the context of a Jupyter Notebook, and in that context when d3 tries to render those links, I get a javascript error on each <code>tick()</code> saying <code>Error: &lt;path&gt; attribute d: Expected number, &quot;MNaN NaN\n        …&quot;.</code></p>
  <p><code>linkArc()</code> does return a string, but I'm hoping someone wiser in the ways of Jupyter and/or d3 can explain to me why that string works in one context, but not the other.</p>
  <p>any thoughts?</p>