Angular4中的堆积条形图

Question

我正在尝试将 d3.js 堆叠条形图应用于 Angular4。查看 stack() reference on github，我的组件中有这个

  ngOnChanges(){
    console.log("change detected");
    let self = this;
    let d3 = this.d3;
    let d3ParentElement: any;
    let svg: any;
    let width: number = 500;
    let height: number = 150;

    if (this.parentNativeElement !== null) {
      d3.select("svg").remove();
      svg = d3.select(this.parentNativeElement)
      .append('svg')
      .attr('width', width)
      .attr('height', height);

      var datas = [
        {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
        {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
        {month: new Date(2015, 2, 1), apples:  640, bananas:  960, cherries: 640, dates: 400},
        {month: new Date(2015, 3, 1), apples:  320, bananas:  480, cherries: 640, dates: 400}
      ];

      var stack = d3.stack()
      .keys(["apples", "bananas", "cherries", "dates"])
      .order(d3.stackOrderNone)
      .offset(d3.stackOffsetNone);

      var series = stack(datas);
}

显然这只是一个快照。最后一行的 'datas' 导致了这个问题，但是为什么 'series' 和可能的 'stack' 变量很难使用 'datas' 数组中的键？

我也在使用d3-ng2-service。

Answer 1

我使用

成功消除了错误

let stack: any;
let series: any;

在文件的开头并从每个文件中删除 'var'。

Angular4中的堆积条形图

Stacked bar Chart in Angular4

angular

d3.js

typescript-typings

stacked-chart