0
我有大量的與時間相關的數據。我想繪製一個希望簡單的線條圖。簡化示例:如何在D3.js線圖上繪製時間數據
var data = [{ time: 13:30, size: 100 }, { time: 13:37, size: 500}, { time: 13: 42, size: 300 }
{ time: 13:51, size: 150 }, { time: 13:56, size: 175 }, { time: 15:59, size: 75 }
{ time: 16:11, size: 75 }, { time: 16:37, size: 125 }, { time: 15:27, size: 200 } [...]
{ time: 20:36, size: 500 }]
許多時間值和相應的大小值。當然,我不想在這個圖表上繪製每一個時間值。相反,我想採取13:30的最低值,然後以30分鐘的時間間隔(即13:30,14:00,14:30 ... 20:30)繪製座標軸上的時間,直到我點擊最近的時間在我的數據陣列中。與此同時,我想每大小值繪製。因此,圖表將只顯示13:30和14:00的勾號,但與13.37,13.42,13.51,13.56相對應的值將被繪製在線上。
我該怎麼做呢?
我第一次嘗試這樣的:
var graph = d3.select('.graph'),
WIDTH = 790,
HEIGHT = 250,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
}
xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]),
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([smallest, largest]),
xAxis = d3.svg.axis().scale(xScale),
yAxis = d3.svg.axis().scale(yScale).orient("left");
NB「最小」和「最大」的變量都在我的數據陣列,在其他地方計算的最小和最大大小值。很明顯,這是錯誤的,因爲這會繪製軸上的每個時間值(如上所述,我不想這樣),即使我做了錯誤和毛病可怕的。
我該如何去實現我想達到的目標?
THX - Gaweyne