Question

我正在使用ng2-nvd3做散点图。数据在服务器上获取。从响应中，我创建数据和选项以显示图表。这可以正常工作，但是X轴等于0。因此所有点都是Y轴。看到图片。

但是，当我调整浏览器窗口的大小（最小化或最大化）或打开控制台浏览器时，图表发生变化，一切都很好。

就像更新了版式一样。也许与回调或类似的东西不相关。我尝试添加 ChangeDetectorRef 的 detectChanges（），但没有任何变化。

在我的component.ts中： Goto_PCA是在ngOnInit（）中调用的函数。

  goto_PCA(datasetId, type) {
    this.display = false;
    this.api.getPCA(datasetId, type).subscribe(
      res => {
        this.pca = res;
        console.log("PCA", this.pca);
        this.data = this.generateData(1, this.pca);
        console.log("Data", this.data);
        this.chart = this.scatterChart(false, this.pca);
        this.display = true;
        d3.redraw()
        this.cd.detectChanges();
      },
      err => {
        this.display = false;
        console.log(err);
      }
    );
  }

  // function to generate the data per group
  generateData(groups, points) {
    //# groups,# points per group
    let samples = points.sampleNames;
    points = points.pcaComponents;
    let data = [];
    for (let i = 0; i < groups; i++) {
      data.push({
        values: []
      });
      for (var j = 0; j < points.length; j++) {
        data[i].values.push({
          x: points[j][0], //PC1
          y: points[j][1], // PC2
          label: samples[j],
          shape: "circle"
        });
      }
    }
    return data;
  }

  scatterChart(legend, pca) {
    return {
      chart: {
        type: "scatterChart",
        height: 500,
        color: d3.scale.category10().range(),
        interactive: true,
        showLegend: legend,
        showLabels: false,
        scatter: {
          onlyCircles: false
        },
        showDistX: true,
        showDistY: true,
        duration: 500,
        xAxis: {
          axisLabel: "PC1 (" + pca.variance[0] + "%)",
          tickFormat: function(d) {
            return d3.format(".3g")(d);
          }
        },
        yAxis: {
          axisLabel: "PC2 (" + pca.variance[1] + "%)",
          tickFormat: function(d) {
            return d3.format(".3g")(d);
          },
          axisLabelDistance: -5
        }
      }
    };
  }

并在我的HTML中：

   <nvd3 [options]="chart" [data]="data"></nvd3>

Ng2-Nv3d X轴不显示

0 个答案: