[英]How to modify a domain dealing with dates in d3.js?
我正在研究這個例子: https://bl.ocks.org/d3noob/2505b09d0feb51d0c9873cc486f10f67通過d3noob量身定做的,我意識到,第一和最后一個點是部分的利潤。 我想知道如何在x.domain的每一側上做一個緩沖區,以使點距邊距不遠。
我相信對此負責的熱線如下:
x.domain(d3.extent(data, function(d) { return d.date; }));
我試圖用d3.min和d3.max修改此行,但這似乎不起作用,因為x軸正在處理日期。
您可以使用interval.offSet增減時間(在本例中為天)。
例如,從x
域的開始減去2天,在x
域的末尾增加2天:
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
您可能需要考慮嘗試d3fc范圍組件 。 在您的情況下,您可以在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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.