Question

我的Ember应用程序中有一个条形图组件，Y轴缩放不正确（它的顶部计数最低，底部的计数最高）。

我可以通过将.range [0，barHeight]更改为.range [barheight，0]来翻转Y轴，但这会使条形变形，因此它们不再代表正确的值。

我知道需要更改条形高度，但我不知道如何在组件内执行此操作。任何帮助非常感谢：

相关守则：

 let svg = select(this.$('svg')[0]);
    this.set('svg', svg);
    let {
      width,
      height
    } = this.get('svg').node().getBoundingClientRect();

let padding = {
      top: 10,
      bottom: 30,
      left: 40,
      right: 0
    };

let barsHeight = height - padding.top - padding.bottom;
    this.set('barsHeight', barsHeight);

  // Y scale & axes
    let yScale = scaleLinear().range([ 0, barsHeight ]);
    this.set('yScale', yScale);
    this.set('yAxis', axisLeft(yScale));
    this.set('yAxisContainer', svg.append('g')
      .attr('class', 'axis axis--y')
      .attr('transform', `translate(${padding.left}, ${padding.top})`)
    );
 //Update the scales on chart render
this.get('yScale').domain([ Math.max(...counts), 0 ]);

//Update the Axis
  this.get('yAxis').scale(this.get('yScale'));
    this.get('yAxisContainer').call(this.get('yAxis'));

//drawing the bars

  barsEnter
      .merge(barsUpdate)
      .transition()
      .attr('width', `${this.get('xScale').bandwidth()}px`)
      .attr('height', data => `${this.get('yScale')(data.count)}px`)
      .attr('x', data => `${this.get('xScale')(data.label)}px`)
      .attr('y', data => `${this.get('barsHeight') - this.get('yScale')(data.count)}px`)
      .attr('fill', data => this.get('colorScale')(data.count))
      .attr('opacity', data => {
        let selected = this.get('selectedLabel');
        return (selected && data.label !== selected) ? '0.5' : '1.0';
      })

Answer 1

基本上反转您的height和y。

Y属性变为：

.attr('y', data => `${this.get('yScale')(data.count)}`)

高度变为：

.attr('height', data => `${this.get('barsHeight') - this.get('yScale')(data.count)}`)

注意，您的svg属性不后面会有px个单位。

在D3图表中，Y轴反转后，条形高度会发生变化

1 个答案: