如何修改處理d3.js中日期的域？

我正在研究這個例子：https://bl.ocks.org/d3noob/2505b09d0feb51d0c9873cc486f10f67 由d3noob製作，我意識到第一個和最後一個點部分在邊緣。我想知道如何在x.domain的每一邊製作一個緩衝區，以保持點距邊緣的距離。如何修改處理d3.js中日期的域？

我相信，負責任的這一行是：

x.domain(d3.extent(data, function(d) { return d.date; }));

我試圖修改與d3.min和d3.max這條線，但是這似乎並沒有工作，因爲x軸處理日期。

來源

2017-08-08 anyone

您可以使用interval.offSet來增加或減少時間（在本例中爲天）。

例如，減2天開始，並在x域的末尾添加兩日遊：

x.domain([d3.timeDay.offset(d3.min(data, function(d) { 
    return d.date; 
}), -2), d3.timeDay.offset(d3.max(data, function(d) { 
    return d.date; 
}), +2)]);

這裏是更新bl.ocks：https://bl.ocks.org/anonymous/f4bb84ba833b6f8ec9ddd3e8281abc44/79839a6a937d712edca8a7c8f00e4301723726c3

來源

2017-08-08 14:32:03

你可能要考慮嘗試d3fc extent component。你的情況，你可以在X標尺的兩側加有一天，當如下：

var xExtent = fc.extentDate() 
    // the property of the data that defines the x extent 
    .accessors([function(d) { return d.date; }]) 
    // pad in domain units (in this case milliseconds) 
    .padUnit('domain') 
    // ensure that the scale is padded by one day in either direction 
    .pad([millisPerDay, millisPerDay]); 

x.domain(xExtent(data));

您也可以使用這個組件來簡化與Y域範圍的計算：

var yExtent = fc.extentLinear() 
    // the property of the data that defines the y extent 
    .accessors([function(d) { return d.close; }]) 
    // pad by 10% in the +ve direction 
    .pad([0, 0.1]) 
    // ensure that the extent includes zero 
    .include([0]); 

y.domain(yExtent(data));

這裏的一個完整的例子：https://bl.ocks.org/ColinEberhardt/4b8737e0251f92075693a6e04df72638

來源

2017-08-09 07:11:29 ColinE

如何修改處理d3.js中日期的域？

回答

相關問題