0

我在这里有一个演示

这是一个角度应用程序，我正在尝试创建 D3 图表。

使用 createDate 函数创建图表数据，创建随机数据和日期。

我希望图表使用更新按钮进行更新，因此我使用 ngOnChanges 但这不会在页面加载时创建图表。

被注释掉的 ngOnInit 在页面加载时加载图表。

ngOnChanges(changes: SimpleChanges) {
    if(!changes.data) return;

    if(this.hasPreviousData){

      this.createData()

      this.stack = d3.stack()
          .keys(['data_1', 'data_2', 'data_3', 'data_4'])

      this.createStack(this.testData);
    }else{

      this.createData()

      this.stack = d3.stack()
        .keys(['data_1', 'data_2', 'data_3', 'data_4'])

      this.initScales();
      this.initSvg();
      this.drawAxis();
      this.createStack(this.testData);

      this.hasPreviousData = true;
    }
  }
4

1 回答 1

2

原因ngOnChanges不起作用，因为它适用于@Input参数更改。在您的情况下，您只是从组件本身更改组件的值。

看看这个演示。我在您的演示代码中进行了一些代码更改，它似乎在做您所期望的相同的事情。

您可以将图形创建逻辑放在createData()本身中并处理其余部分：

  createData() {
    this.testData = [];
    this.years = Math.floor(Math.random() * this.dates.length)
    console.log(this.years)
    for(let i:number= 0; i<=this.years; i++){
      this.testData[i] = {
        data_1: Math.floor(Math.random() * (this.max - this.min)),
        data_2: Math.floor(Math.random() * (this.max - this.min)),
        data_3: Math.floor(Math.random() * (this.max - this.min)),
        data_4: Math.floor(Math.random() * (this.max - this.min)),
        date: this.dates[i]
      }
    }    
    this.stack = d3.stack()
      .keys(['data_1', 'data_2', 'data_3', 'data_4']);
    if(this.hasPreviousData){
      this.createStack(this.testData);
    }else{
      this.hasPreviousData = true;
      this.initScales();
      this.initSvg();
      this.drawAxis();
      this.createStack(this.testData);
    }
  }
于 2019-08-17T10:55:11.173 回答