我的面积图的 x 轴需要什么样的比例？

Question

我正在 D3 中制作一个面积图，我正在用 4 个点进行测试。 y 轴是从 0 到 data.count 最大值的线性刻度。 x 轴是一个时间尺度，它使用 d3.extent 设置域 - data.date 的最小值和最大值。这些日期是根据月份和年份值创建的，因此它们都是月份的第一天。

假设图中有 4 列。数据点的 x 值应位于每列的中心。这意味着第一个点实际上不会接触 y 轴，这对于面积图来说是正常的。 y轴到第一个点的距离是半列。

我需要在 y 轴上添加一个数据点，以便看起来数据从某处开始并到达第一个数据点。我需要在图表的右侧边缘添加一个数据点，使其看起来像最后的数据扁平线。

我尝试将这些额外的起点和终点添加到我的数据数组中，并为它们提供适当的日期值（它们各自月份的 15 日或中途）。这给了我6分。但是，不是在第一个点的左侧有一半的列宽，在第四个点的右侧有一半的列宽，所有 6 个点都是均匀分布的，这不是我需要的。

我应该为 x 轴使用不同类型的刻度还是完全不同的方式来解决这个问题？

Answer 1

我找到了一种解决方法，并希望将其分享给处于相同情况的其他人。

我的第一次尝试是简单地修改第一个和最后一个元素的日期。由于每个点代表一个月的第一天，但​​需要落在列的中间，我将第一个日期修改为该月的 15 号，将最后一个日期修改为上个月的 15 号而不是 1 号下个月。这几乎起作用了，但有点偏离中心，因为有些月份有 28 或 31 天。

因此，我将 x 轴更改为线性刻度，范围为 0 到包裹整个区域图的 div 的宽度。

然后我遍历我的数据数组并为每个以这种方式计算的对象添加一个 xval 属性：

if(i === 0){
    xval = 0;
}else{
    xval = (columnWidth * i) - (columnWidth/2);
}

然后，当我计算面积图坐标时，我将 xval 传递给 .x，如下所示：

var area = d3.area()
  .x(function(d) { return x(d.xval); })
  .y1(function(d) { return y(d.count); });
area.y0(y(0));