D3.js获取直方图/条形图列宽

Question

我正在生成一个图表，显示集合中文档的已发布日期。

这些日期可能在几天，几个月和几天之间非常大。年。

values = [Mon Jan 01 2001 00:00:00 GMT+0000 (GMT Standard Time), Tue Jan 02 2001 00:00:00 GMT+0000 (GMT Standard Time), ... , Thu Jan 09 2003 00:00:00 GMT+0000 (GMT Standard Time)]

所以我使用“d3.layout.histogram”将文档日期分组为10个（或尽可能接近）的文件夹。

var x = d3.time.scale().domain([firstDate, lastDate]).range([0, width]);

var data = d3.layout.histogram()
        .bins(x.ticks(bins))  
        (values);

var formatDate = d3.time.format("%d/%m/%y");
var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickFormat(formatDate);

然后，以固定的10px（图中的A）宽度绘制矩形条，如下所示：

bar.append("rect")
        .attr("x", 0)
        .attr("width", function(d) {
            rtnW = 10;          
            return rtnW;
        })
        .attr("height", function(d) { return height - y(d.y); });

如果我尝试动态设置宽度，只要刻度线在轴上均匀分布就可以了：

.attr("width", (width/(x.ticks(bins).length-1))-1)

然而，如果刻度线不完全适合那么你会得到前面和后面的备用刻度。结束（图中的！），它会抛出列宽计算。

所以问题是：

如何计算/得到xAxis上每个刻度之间的实际宽度（图中的B）？ （如果我可以在1号和2号刻份上找回日期，我也可以解决它。可以通过axis.tickValues帮助解决这个问题吗？）。

非常感谢！

Answer 1

根据@larskothoff关于使用x scale .ticks（）的建议，我提出了这个解决方案来找到由D3的直方图动态生成的刻度之间的间距。

正如Lars在评论中所说，如果您知道有多少刻度，您可以从刻度（x）得到刻度。我们可以从xAxis那里得到它。

var tickCount = xAxis.ticks()[0];

将其传递到x刻度.tick（）以返回刻度（刻度上的所有日期）。

x.ticks(tickCount)

要获得比例上第一个日期的x位置，我们将该日期传递给比例：

var firstDate = x(x.ticks(tickCount)[0]);

要获得比例上第二个日期的x：

var secondDate = x(x.ticks(tickCount)[1]);

最后计算列宽：

var colWidth = secondDate - firstDate;

更简洁（并删除​​填充1）：

var colWidth = Math.floor(x(x.ticks(xAxis.ticks()[0])[1]) - x(x.ticks(xAxis.ticks()[0])[0])) - 1;

到目前为止，这适用于我的所有测试数据，似乎是一个解决方案。建议采用更强大/更有效的方法欢迎！

Answer 2

这应该有效：

.attr("width", function(d) { return x(d.dx + d.x ) - x(d.x) })