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

D3 Bar Graph: flipping the Y-axis flips my data

我 运行 在 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);

这是我更改的代码。如果你反转 运行ge ([padding, h - padding]),条是正确的,但轴不是。

修复只是交换属性 "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" 表示下边缘的距离。