如何调整D3.js堆叠柱状图上方折线图的点至X轴刻度正上方？

嘿，这个问题我熟！你的折线图点现在落在柱状图左侧，核心原因是堆叠柱状图常用的d3.scaleBand()比例尺，调用x(d.date)时返回的是每个柱状图左边缘的位置，而X轴刻度是对应每个柱状图的中心位置，所以才会错位。

解决方法超简单，只需要在计算折线图的X坐标时，加上band宽度的一半，把位置从左边缘移到中心：

let dataline = d3.line()
 .x((d) => { return x(d.date) + x.bandwidth() / 2; }) // 关键：加上带宽的一半
 .y((d) =>{ return y(d.total); });

原理说明： #

• x.bandwidth()会返回每个柱状图（也就是每个band）的宽度
• 把左边缘位置x(d.date)加上宽度的一半，就刚好定位到每个band的中心，也就是X轴刻度的正上方，这样折线的点就会完美和刻度对齐了。

如果你的X轴用的是d3.scalePoint()，其实默认就会返回刻度中心位置，但堆叠柱状图一般用scaleBand来分配柱子宽度，所以上面的方法完全适用。

内容的提问来源于stack exchange，提问作者ttmt