title: Angular, D3 - Cannot read property 'forEach' of undefined
body: <p>I have a plunker here - <a href="https://plnkr.co/edit/3BtK3aYltU3jzV5hC9DW?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/3BtK3aYltU3jzV5hC9DW?p=preview</a></p>
  
  <p>I'm trying to create a stacked bar chart in Angular using D3.</p>
  
  <p>The chart data needs to be JSON data.</p>
  
  <p>I found an example of a stacked Bar Chart using JSON</p>
  
  <p><a href="https://stackoverflow.com/questions/45941427/d3-stacked-chart-with-json-data">D3 Stacked Chart with JSON data</a></p>
  
  <p>This is what I have based my plunker on within Angular</p>
  
  <p>I'm getting the error </p>
  
  <pre><code>ERROR TypeError: Cannot read property 'forEach' of undefined
  </code></pre>
  
  <p>at this point</p>
  
  <pre><code>this.data.forEach((d:any) =&gt;{
      d.total = 0;
      this.keys.forEach((k:any) =&gt;{
          d.total += d[k];
      })
  }); 
  </code></pre>
  
  <p>I'm guessing this is a typescript issue.</p>
  
  <p>How can I stop this error and display the stacked bar chart in Angular.</p>