我在D3版本4中建立条形图,使用时间刻度作为我的x轴。轴本身渲染良好,但条形图已关闭;图形中的最后一个条显示在轴范围之外。如何指定适当的范围和/或x值?
Working example
代码段:
const xScale = (width, dates) =>
scaleTime()
.domain([new Date(dates[0]), new Date(last(dates))])
.range([0, width])
svg.select('g')
.selectAll(`.${styles['bar']}`)
.data(series)
.enter()
.append('rect')
.attr('class', styles['bar'])
.attr('x', (d) => x(d.date))
.attr('width', Math.floor(width / series.length))
.attr('y', (d) => {
const scaled = y(d.count)
return height - scaled > 0 && height - scaled < 2
? height - 2
: scaled
})
.attr('height', (d) => {
const scaled = height - y(d.count)
return scaled > 0 && scaled < 2
? 2
: scaled
})
最佳答案
问题不在于条的宽度,填充物或范围...问题不在于scaleTime
的概念。例如,您的第一个值是(我指的是工作示例):
Wed Sep 21 2016
该值在2017年之前开始,但是由于条形的宽度,在2017年之后。您的最后一个值是(同样是工作示例):
Sat Sep 21 2030
它位于域的末端(2030)之前,但是由于条形图的宽度在该比例尺的范围之后。
您可以轻松地看到这是小提琴,我将域设置为2032:https://jsfiddle.net/gerardofurtado/dnxc9cd9/
一个简单的解决方案:如果您想要条形图以x刻度显示年份,则解析获取该年份的日期并改用带刻度。