xAxis d3上的值相同

时间:2018-09-17 12:54:50

标签: java angular d3.js

我有一个barChart,我想在x轴上重复多个值,我的dataChart是这样的:

this.dataChart = [
  {valueX: 'Ene.17', valueY: 0.00},
  {valueX: 'Dic.16', valueY: 0.00},
  {valueX: 'Nov.16', valueY: 0.00},
  {valueX: 'Oct.16', valueY: 0.00},
  {valueX: 'Sep.16', valueY: 0.00},
  {valueX: 'Sep.16', valueY: 0.00}
];

this is the image with this values

我需要显示另一个“ 9月16日”,这是我的代码的一部分:

  createChart() {
    this.updateConfig();
    let i = 0;
    this.dataChart.forEach(row => {
      row['id'] = i;
      i ++;
    });
    this.ind = d3.range(this.dataChart.length);
    const element = this.chartContainer.nativeElement;
    this.width = element.offsetWidth - this.margin.left - this.margin.right;
    this.height = element.offsetHeight - this.margin.top - this.margin.bottom;
    this.xScale = d3.scaleBand().range([0, this.width]).padding(this.padding);
    this.yScale = d3.scaleLinear().range([this.height, 0]);
    this.xAxis = d3.axisBottom(this.xScale);
    this.yAxis = d3.axisLeft(this.yScale).tickSize(-this.width).ticks(4).tickFormat(d => d + this.tickFormat);
    this.svg = d3.select(element).append('svg')
      .append('g')
      .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
  }

  createScale() {
    this.updateAxis();
    this.svg.append('g')
      .attr('class', 'y axis')
      .call(this.yAxis);
    this.svg.append('g')
    .style('font-size', () => {
      return '14px';
    })
      .attr('class', 'x axis')
      .attr('transform', `translate(0, ${this.height})`)
      .call(this.xAxis);
  }


  updateAxis() {

    let maximumY = d3.max(this.dataChart, function (d) {
      if (d['valueY'] !== undefined) {
        return d['valueY'];
      } else {
        return 50;
      }
    });
    if ( maximumY  === 0 ) {
      maximumY = 50;
    }
    this.yScale.domain([-(maximumY as any * .03), maximumY as any * 1.2]);
    this.xScale.domain(this.dataChart.map(d => {
      console.log('de', d['valueX']);
      return d['valueX'];
  }));

  }

重要的部分是当我在createScale上执行时:call(this.xAxis)仅调用5个值... PD:我在用angular5 ..

0 个答案:

没有答案