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

【问题标题】：FreeCodeCamp.org d3 bar chart axis alignment test is failingFreeCodeCamp.org d3 条形图轴对齐测试失败
【发布时间】：2019-09-11 17:18:08
【问题描述】：

我正在为FreeCodeCamp 做一个d3 bar char project，问题是条形与 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;

老实说，我不在乎条形图是在刻度的左侧、中间还是右侧，因为只要它是一致的，就可以随时调整它，但是因为它甚至不是一致的条形图的位置与蜱相关的着陆，我现在不知道该去哪里。

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

【问题讨论】：

标签： d3.js svg alignment axes

【解决方案1】：

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

【讨论】：