无法使用 Angular 7 中的 D3 条形图读取未定义的属性“地图”

Question

当我映射 totalStores 对象时，无法读取未定义的属性“映射”。

我已将现有 JSON 数据解析为两个变量 store 和 storeCount，分别为 X 轴存储对象和 Y 轴存储对象

ngOnInit() {
    this.DashboardService.getActiveProjectsStatusByDimension(
      this.statusIndex,
      this.dimension
    ).subscribe(res => {
      this.res = res;
      this.projectSelectedDimension = JSON.parse(JSON.stringify(res));

      this.totalStores = Array();

      var storeCountIndex = 2;

      for (let k = 0; k < this.projectSelectedDimension.data.length; k++) {
        let obj = this.projectSelectedDimension.data[k];
        let xAxis = Object.keys(obj)[0];
        let yAxis = obj[Object.keys(obj)[0]][storeCountIndex];
        // console.log("x:", xAxis);
        // console.log("y:", yAxis);
        let objBarChart = { store: xAxis, storeCount: yAxis };
        this.totalStores.push(objBarChart);
      }

    });

    this.initAxis();
  }


private initAxis() {
    this.x = d3Scale
      .scaleBand()
      .rangeRound([0, this.width])
      .padding(0.1);
    this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
    this.x.domain(this.totalStores.map(d => d.store));
    this.y.domain([
      0,
      d3Array.max(this.totalStores, this.totalStores.map(d => d.storeCount))   // erroe saying valueof is not a function
    ]);
  }

Answer 1

.subscribe() 函数内的代码在 getActiveProjectsStatusByDimension() 函数返回后运行。所以你试图映射一个未定义的对象。要解决这个问题，只需将 initAxis() 函数放在 subscribe 块中即可。

ngOnInit() {
    this.DashboardService.getActiveProjectsStatusByDimension(
      this.statusIndex,
      this.dimension
    ).subscribe(res => {
      this.res = res;
      this.projectSelectedDimension = JSON.parse(JSON.stringify(res));

      this.totalStores = Array();

      var storeCountIndex = 2;

      for (let k = 0; k < this.projectSelectedDimension.data.length; k++) {
        let obj = this.projectSelectedDimension.data[k];
        let xAxis = Object.keys(obj)[0];
        let yAxis = obj[Object.keys(obj)[0]][storeCountIndex];
        // console.log("x:", xAxis);
        // console.log("y:", yAxis);
        let objBarChart = { store: xAxis, storeCount: yAxis };
        this.totalStores.push(objBarChart);
      }
      this.initAxis() //put it here
    });

//    this.initAxis();
  }