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獲取直方圖/酒吧列寬

回答

相關問題