Question

我在D3中制作了一个区域图，我正在测试4分。 y轴是从0到data.count的最大值的线性标度。 x轴是一个时间尺度，用d3.extent设置域 - 最小值和最小值。最大数据.date。这些日期是从月份和日期创建的。年价值，所以他们都是他们一个月的第一个。

想象一下，图中有4列。数据点的x值应落在每列的中心。这意味着第一个点实际上不会触及y轴，这对于区域图是正常的。从y轴到第一个点的距离是半列。

我需要在y轴上添加一个数据点，这样看起来数据从某处开始并转到第一个数据点。我需要在图表的右边添加一个数据点，使其看起来像最后的数据平面线。

我尝试添加这些额外的开始＆amp;终点指向我的数据数组并为它们提供适当的日期值（它们各自月份的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));