D3.js获取直方图/酒吧列宽

我产生用来显示的一组文件发布日期的图表。D3.js获取直方图/酒吧列宽

这些日期可以在几天之间非常大大，月&年。

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)

但是，如果蜱虫并不完全适合，那么你在轴的前&结束，这将引发断colu得到备用的规模（图中！）宽度计算。

所以，问题是：

如何计算/获取，在X轴每个刻度之间的实际宽度（图B）？（如果我能尽快回到蜱1 & 2的日期，我大概可以做出来了。axis.tickValues可以用这张??帮助）。

Column Width

非常感谢！

来源

2013-07-23 ukmikeb

我不知道你想做什么，但你可以得到轴的使用'.ticks（）'函数的蜱。为了获得蜱之间屏幕坐标的差异，前两个值，将它们传递给您的比例并计算差异。看起来问题可能在于条形的位置，而不是宽度。 –

我认为拉尔斯的方法是可行的。如果你知道x轴的长度（你会这样做），并且你知道该轴上的开始和结束日期/时间（你会这样做（我会假设在几秒钟内工作会是最好的）），如果你知道图上的滴答数（这将是我的狡猾计划可能需要帮助的点），您将能够计算间隔。我想你可能需要做一些实验。 – d3noob

您需要计算间隔的是轴上的两个相邻点。 –

使用x跟随@larskothoff的建议秤.ticks（），我想出了这个解决方案，发现已经由D3的直方图被动态生成的刻度之间的距离。

由于拉斯在评论中说，你可以从规模上获得蜱（x）如果你知道有多少蜱有。我们可以从xAxis中获得。将其转换为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-24 09:15:56 ukmikeb

对你和拉斯很好。这肯定会突出我不知道的东西。干杯 – d3noob

这应该工作：

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

来源

2013-11-11 13:12:13

D3.js获取直方图/酒吧列宽

回答

相关问题