1

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

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

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 可以帮助解决这个问题吗？？）。

列宽

非常感谢！

4

2 回答 2

2

遵循@larskothoff 关于使用 x 刻度 .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;

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

于 2013-07-24T09:15:56.570 回答
1

这应该有效：

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

于 2013-11-11T13:12:13.610 回答