Question

试图让博斯托克的stacked bar chart以角度4运行。

我之前在此发布了一个问题，但我又遇到了这个新错误，

我把两个函数stackMin和stackMax放在ngOnChanges（）

之外

  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;
    let datas: {month: string, apples: number, bananas: number, cherries: number, dates: number}[] = [];
    let stack: any;
    let series: any;

    let margin: {top: number, right: number, bottom: number, left: number} = {
       top: 20,
       right: 30,
       bottom: 30,
       left: 60
     };

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

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

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

      series = stack(datas);

        var x = d3.scaleBand()
            .domain(datas.map(function(d) {
              return d.month;
            }))
            .rangeRound([margin.left, width - margin.right])
                .padding(0.1);

        var y = d3.scaleLinear()
            .domain([d3.min(series, stackMin), d3.max(series, stackMax)])
            .rangeRound([height - margin.bottom, margin.top]);
      ..............
          }

          function stackMin(serie) {
            return d3.min(serie, function(d) {
              return d[0];
            });
          }

          function stackMax(serie) {
            return d3.max(serie, function(d) {
              return d[1];
            });
          }
        }
       }

Datencia在github上有一个很棒的回购，有各种d3图形的角度示例，但遗憾的是还没有添加堆积条形图示例。

更新：

自从我发布以来，Datencia已经在他的github回购中添加了一个关于如何执行此操作的部分。它可以在github.com/datencia/d3js-angular2-example/tree/master/

找到

谢谢，

Answer 1

尝试不声明功能：
.domain([d3.min(data,d => { return d3.min (keys, key => { return d[key]; }); }), d3.max(data, d => { return d3.max(keys, key => { return d[key]; }); })])

d3堆积条形图（angular4

1 个答案: