我正在为 FreeCodeCamp 做一个 d3 条形字符项目，问题是条形图与 x 轴上的刻度不对齐。
问题在于，柱线的关闭方式在逐笔报价之间并不一致，其中一些甚至似乎对齐。
在做了一些研究之后，我认为这可能是一个问题，因为我没有必要设置即时报价的数量，因此柱线的数量是偶数倍，所以我尝试了xAxis.ticks(data.length/25);，但这并没有解决它。然后我想我会尝试四的倍数，因为数据每季度分解为一个数据点(xAxis.ticks(16);(，这也不起作用。
奇怪的是，x 轴的刻度与用于条形定位的刻度相同。数据是从 JSON 请求中提取的
下面是 JSON 请求：
var req = new XMLHttpRequest();
req.open('GET', 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json',true);
req.send();
req.onload=function(){
let data = JSON.parse(req.responseText).data.map(e=>{
return {
gdp: e[1],
date: new Date(Date.parse(e[0])),
dateString: e[0],
dateInt: Date.parse(e[0])
};
});
这是我正在使用的 x 刻度：
const xScale = d3.scaleLinear()
.domain(
[
d3.min(data, d=>d.dateInt),
d3.max(data, d=>d.dateInt)
]
)
.range([padding, width-padding]);
条形的x属性声明.attr('x', (d,i)=>xScale(d.dateInt))
最后是轴声明的代码段：
var xAxis = d3.axisBottom(xScale);
xAxis.ticks(16);
xAxis.tickFormat(d3.timeFormat("%Y"));
width变量是整个svg元素的宽度，padding是实际图形区域周围的填充量。
这是包装轴的g元素：
svg.append('g')
.attr('transform', `translate(0, ${height-padding})`)
.attr('id', 'x-axis')
.call(xAxis);
其中height是 svg 元素的高度。
如果它是相关的，我认为这不是因为rects 的x位置是明确定义的，但柱线的width被定义为const barWidth = (width-2*padding)/data.length;
老实说，我不在乎柱线是在即时报价的左侧、中间还是右侧，因为只要保持一致，它总是可以调整的，但由于它甚至不一致柱线相对于即时报价的着陆位置，我不确定此时该去哪里。
请注意，如果您分叉项目并将 JS 代码顶部附近的行从const width = 900;更改为const width = 9000;，它将增加整个 svg 元素及其具有width属性的子元素(特别是各个条形(的宽度，从而更容易看到条形相对于刻度线的排列位置。
因此，在玩了一周的刻度线数量和轴的对齐方式后，我发现我需要从scaleLinear切换到scaleTime