D3条形图：翻转Y轴会翻转我的数据

Question

在d3中制作条形图时遇到一个常见问题：我的y轴倒置。经过一番谷歌搜索，我发现解决此问题的最佳方法是反转y域。唯一的问题是，当我这样做时，图形上的条形图会切换位置，因此最大的是开头而不是结尾。我需要正确的y轴，而无需更改我的条形。

条形正确，但y轴上下颠倒

条形不正确，但y轴朝上

以下是代码：https://codepen.io/lucassorenson/pen/rPRadR?editors=0010

const yScale = d3.scaleLinear()
  .domain([0, d3.max(json, (d) => d[1])])
  .range([h - padding, padding]);
const yAxis = d3.axisLeft(yScale);

这是我更改的代码。如果您反转范围（[padding，h-padding]），则条形正确但轴不正确。

Answer 1

解决方法只是交换属性“ height”和“ y”的回调函数。

您的代码为：

...
svg.selectAll('rect')
    .data(json)
    .enter()
    .append('rect')
    .attr('width', 3)
    .attr('height', (d) => yScale(d[1]))
    .attr('x', function(d, i){
      return i*4 + padding
    })
    .attr('y', function(d){
      return  h - yScale(d[1]) - padding
    })

将其更改为：

...
svg.selectAll('rect')
    .data(json)
    .enter()
    .append('rect')
    .attr('width', 3)
    .attr('y', (d) => yScale(d[1]))
    .attr('x', function(d, i){
      return i*4 + padding
    })
    .attr('height', function(d){
      return  h - yScale(d[1]) - padding
    })

通常使用属性“ y”设置矩形的上边缘，使用“ height”表示矩形的下降距离。