D3 时间尺度问题，计算项目的位置

Question

我正在制作一个在 x 轴上使用时间刻度的条形图。

每个条形代表一个月，因此所有日期都设置为 YYYY-MM，当我加载数据时，我会使用：

var parseDate = d3.time.format("%Y-%m").parse;

问题在于每个月的天数不同，一些条形图比其他条形图更接近，而不是具有相同的边距，如您在此屏幕截图中所见：

你可以在这里找到代码，http://tributary.io/inlet/8700564

谢谢

Answer 1

您有两个选择：或者使用序数（类别）刻度作为 x 轴，这将使所有条形具有相同的宽度，或者根据月份的长度单独设置每个条形的宽度。

要计算月份的长度，您可以使用d3 time intervals 来获取下个月的开始日期。那么宽度就是 xScale 上两个日期位置之间的差异，可能通过填充进行调整，以在条形之间留出一些空间。

rect.attr("x", function(d){return xScale(d.date) + padding;})
    .attr("width", function(d){
              return xScale( d3.time.month.offset(d.date, 1) )
                   - xScale(d.date)
                   - 2*padding;
        });