D3 图表中 Y 轴反转后的条形高度变化

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 轴反转后的条形高度变化

Bar Height change following Y Axis inversion in D3 Charts

d3.js

ember.js