title: d3.js drawing two lines within an element
body: <p>I use the D3.js JavaScript library to draw charts. I want to draw two charts in svg, inside the <code>&lt;g&gt;</code> tag. My html looks like this:</p>
  
  <pre><code>&lt;svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 970 580"&gt;
    &lt;g style="transform: translate(40px, 20px);" class="stage"&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Charts should be defined by <code>&lt;path&gt;</code>element with the <code>line</code> attribute. My data array is a nested array: </p>
  
  <pre><code>const data = [[{x: 1, y: 3.4}, ...], [{x: 1, y: 4.3}, ...]]
  </code></pre>
  
  <p>To draw lines, i use following algorithm: select DOM element <code>&lt;g &gt;</code> with class <code>stage</code> and append <code>&lt;path&gt;</code> element with <code>line</code> attribute. My code looks like this:</p>
  
  <pre><code>const $stage = d3.select('.stage')
  const line = d3.line().curve(d3.curveBasis).x(d =&gt; scale.x(d.x)).y(d =&gt; scale.y(d.y))
  
  for (chartData of data) {
      const $line = $stage.selectAll('path').data(chartData)
  
      $line.enter().attr('d', line).style('fill', 'none').style('stroke-width', 2)
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/xuf1emtr/1/" rel="nofollow noreferrer">Example on JSFiddle</a></p>
  
  <p>But when I run it I get an error: <code>TypeError: this.removeAttribute is not a function</code>. This is a standard code pattern for draw chart, can't understand what I'm doing wrong?</p>