[英]Better way to scale d3 time axis
我正在嘗試使用D3.js畫一條線。 它們是在一段時間內間隔采樣的樣本。 我想用x的時間軸來繪制它們。 數據的每個點都只是數組中的索引,我無法弄清楚如何設置軸,而不必在調用d3.time.scale之前手動重新縮放軸。
有人知道如何清理秤嗎?
我的代碼片段。 我的實際代碼下載了數據,並在不同的時間段繪制了許多線,並在圖形中轉換了不同的偏移量。
// input data
var start_time = 1352684763;
var end_time = 1352771163;
// data is exactly 100 samples taken between start_time and end_time
var data = [140,141,140,140,139,140,140,140,140,141,139,140,54,0,0,0,0,0,0,0,0,0...]
var y_max = d3.max(data);
// graph
var scale_x = d3.time.scale().domain([start_time, end_time]).range([0, 100]);
var scale_y = d3.scale.linear().domain([0, y_max]).range([height, 0]);
var step = (end_time - start_time)/100;
function re_scale(x) { return start_time + x*step; }
// for x, rescale i (0..99) into a timestamp between start_time and end_time before returning it and letting scale_x scale it to a local position. Awkward.
var line = d3.svg.line()
.x(function(d, i) { return scale_x(re_scale(i)); })
.y(scale_y)
.interpolate('basis')
var g = graph.selectAll("g")
.append('svg:path')
.attr('d', function(d) { return line(data); })
// also draw axis here...
“域”應指數據中的跨度,“范圍”應指屏幕上的跨度。
目前,它將.range([0, 100])
解釋為許多像素。 如果將其更改為.range([0, width])
它應該工作而無需重新縮放。
d3.time.scale()只需要知道起點和終點即可產生一個良好的軸。 但是,如果您確實希望為每個數據點都打勾,則可以在docs中執行此操作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.