我在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);
这是我改变的代码。如果反转范围([填充,h - 填充]),条形图是正确的,但轴不是。
修复只是交换属性“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”表示它下降了多远。