FreeCodeCamp.org d3 条形图轴对齐测试失败

Question

我正在做 d3 bar char project for FreeCodeCamp，问题是条形图没有与 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 元素的高度。

万一它是相关的，我不认为这是因为 rect 的 x 位置是明确定义的，但是条的 width 是定义的作为 const barWidth = (width-2*padding)/data.length;

老实说，我不在乎条形图是在刻度线的左边、中间还是右边，因为只要它一致，它总是可以调整的，但因为它甚至不一致柱状图相对于价格变动下降，我现在不确定该去哪里。

请注意，如果您分叉项目并将 JS 代码顶部附近的行从 const width = 900; 更改为 const width = 9000;，它将增加整个 svg 元素及其子元素的宽度具有 width 属性的元素（特别是各个条），可以更轻松地查看条相对于刻度线的排列位置。

Answer 1

所以在研究了刻度线的数量和轴的对齐方式一周之后，我发现我需要从 scaleLinear 切换到 scaleTime

FreeCodeCamp.org d3 条形图轴对齐测试失败

FreeCodeCamp.org d3 bar chart axis alignment test is failing

svg

axes

alignment

d3.js