title: Unable to render d3 chart in table cells
body: <p>currently using angular 7 with d3 v7.
  Trying to render area chart in each cell of table (shown in picture below). But using angular method the rendered svg keeps rendering in a loop. Not sure what im doing wrong here
  <a href="https://i.stack.imgur.com/VeUbg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VeUbg.png" alt="enter image description here" /></a></p>
  <p>HTML Code</p>
  <pre><code>&lt;tr [id]=&quot;'row' + '-' + fleet&quot; *ngFor=&quot;let fleet of fleetcolumn&quot;&gt;
        &lt;td&gt;{{ fleet }}&lt;/td&gt;
        &lt;ng-container *ngFor=&quot;let station of formattedBaseStations | slice: 1&quot;&gt;
          &lt;td style=&quot;width: 28em;&quot;&gt;
                &lt;div [id]=&quot;'demandChartInTable1-' + station + '-' + fleet + '-A'&quot;&gt; {{d3DemandChartIntable(station, fleet, 'A')}} &lt;/div&gt;
              &lt;/mat-grid-tile&gt;
              &lt;mat-grid-tile class=&quot;FOChart&quot;&gt;
                &lt;div [id]=&quot;'demandChartInTable1-' + station + '-' + fleet + '-B'&quot;&gt; {{d3DemandChartIntable(station, fleet, 'A')}} &lt;/div&gt;
              &lt;/mat-grid-tile&gt;
            &lt;/mat-grid-list&gt;
          &lt;/td&gt;
        &lt;/ng-container&gt;
      &lt;/tr&gt; 
  </code></pre>
  <p>.ts code</p>
  <pre><code>    d3DemandChartIntable(station, code, position) {
      // set data
      let temp1 = this.data
        .filter(d =&gt; d.baseCode == station &amp;&amp; d.code == code &amp;&amp; d.position == position)
        .map(d =&gt; {
          return {
            date: d3.timeParse('%Y-%m-%d')(d.date),
            hours: d.hours
          };
        });
      const e = document.querySelector('.captainChart');
      // set the dimensions and margins of the graph
      const margin = { top: 0, right: 0, bottom: 1, left: 1 },
        width = 120 - margin.left - margin.right,
        height = 90 - margin.top - margin.bottom;
  
      // append the svg object to the body of the page
      const svg = d3
        .select(`#demandChartInTable1-${station}-${fleet}-${position}`)
        .append('svg')
        .attr('width', e.clientWidth + margin.left + margin.right)
        .attr('height', e.clientHeight + margin.bottom)
        .append('g')
        .attr('transform', `translate(${margin.left},${margin.top})`);
  
      const x = d3
        .scaleTime()
        .domain(d3.extent(data, d =&gt; d.date))
        .range([0, e.clientWidth]);
  
      // Y axis
      const y = d3
        .scaleLinear()
        .domain([0, 500])
        .range([e.clientHeight + margin.bottom, 0]);
  
      // Add the area
      return svg
        .append('path')
        .datum(temp1)
        .attr('fill', '#cce5df')
        .attr('stroke', '#69b3a2')
        .attr('stroke-width', 1.5)
        .attr(
          'd',
          d3
            .area()
            .x(d =&gt; x(d.date))
            .y0(y(0))
            .y1(d =&gt; y(d.hours))
        );
    }
  </code></pre>
  <p><strong>Above code renders repeated svg in each cell instead of rendering just once</strong></p>
  <p><a href="https://i.stack.imgur.com/3YYFG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3YYFG.png" alt="enter image description here" /></a></p>
  <p>any help would be greatly appreciated</p>