title: Error: <line> attribute x1: Expected length, "NaN" in react with d3 and webpack
body: <p>I am looping over an array of lines with has various sources and targets for a force directed graph. When the following code executes I see everything fine in the browser but I see numerous errors in the console.</p>
  
  <pre><code>      {lines.map((line, index) =&gt; (
            // height = 100, width = 100
            &lt;line
              x1={Math.max(75, Math.min(height - 75, line.source.x))}
              y1={Math.max(75, Math.min(width - 75, line.source.y))}
              x2={Math.max(75, Math.min(height - 75, line.target.x))}
              y2={Math.max(75, Math.min(width - 75, line.target.y))}
              key={index}          
            /&gt;              
          )}
  </code></pre>
  
  <p>The errors are:</p>
  
  <pre><code>Error: &lt;line&gt; attribute x1: Expected length, "NaN"
  Error: &lt;line&gt; attribute y1: Expected length, "NaN"
  Error: &lt;line&gt; attribute x2: Expected length, "NaN"
  Error: &lt;line&gt; attribute y2: Expected length, "NaN"
  </code></pre>
  
  <p>I am unsure what exactly is going on, any help would be appreciated. Thanks in advance.</p>