ScatterPlot ng2-nvd3大黑圈

时间:2018-07-08 23:53:31

标签: angular d3.js angular-nvd3 ng2-nvd3

我正在使用ng2-nvd3绘制散点图。我获取数据并以良好格式创建数据对象。然后,我创建显示图表的选项。 点已正确显示,但我有一个大的黑色圆圈,而不是法线圆圈。看到图片pictureBigCircle

我想拥有这个: pictureDesired

我不知道它从哪里来。我在组件中的代码: 生成数据

  generateData(groups, points) {
    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],
          size: Math.random(),
          shape: "circle"
        });
      }
    }
    return data;
  }

生成选项

scatterChart(pca) {
    return {
      chart: {
        type: "scatterChart",
        height: 450,
        color: d3.scale.category10().range(),
        interactive: true,
        showLegend: false,
        showLabels: false,
        scatter: {
          onlyCircles: false
        },
        showDistX: true,
        showDistY: true,
        duration: 350,
        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>

0 个答案:

没有答案