[英]Using d3.js, how can I display data faster on my chart?
在我的代碼中,我在折線圖上加載了一個包含508個條目的JSON。 此JSON包含某些計算機發出的數據,鍵是計算機的名稱。
這是我的JSON的結構:
{
"AF3":3605.1496928113393,
"AF4":-6000.4375230516,
"F3":1700.3827875419374,
"F4":4822.544985821321,
"F7":4903.330735023786,
"F8":824.4048714773611,
"FC5":3259.4071092472655,
"FC6":4248.067359141752,
"O1":3714.5106599153364,
"O2":697.2904723891061,
"P7":522.7300768483767,
"P8":4050.79490288753,
"T7":2939.896657485737,
"T8":9.551935316881588
}
我目前正在一個名為cont
的計數器的幫助下讀取數據,但是,我使用的代碼需要很長時間來繪制圖形:
data.length=508
if (data.length>cont)
cont++`
for (var name in groups) {
var group = groups[name]
group.data.push(aData[cont][name])
group.path.attr('d', line)
console.log(cont)
}
正如你在上面的gif中看到的,我的代碼花了太長時間來繪制所有數據點。 我想毫不拖延地繪制我的數據集的所有數據元素(在這種情況下為508),例如:
data=[{508 elements}];
tick(data)=> draw the points in the graph at the same time, by dataset.
data2=[{50 elements}];
tick(data)=> draw the points in the graph at the same time, by dataset.
tick
是繪制坐標的函數的名稱,而不會失去動畫的感覺。
怎么辦?
這是我的代碼的鏈接:
在我看來,你的問題是圖形是同步的 - “持續時間”既用於動畫也用於圖形轉換。 從本質上講,改變持續時間將無濟於事。
您可以引入時間倍增器。 然后嘗試將持續時間除以2,並使用乘數2.您的實際數據持續時間現在是持續時間* timeMultiplier(您可能希望更改名稱以減少混淆,或在動畫中使用timeDivider)。
// Shift domain
x.domain([now - (limit - 2) * duration * timeMultiplier, now - duration * timeMultiplier])
// Slide x-axis left
axis.transition()
.duration(duration)
.ease('linear')
.call(x.axis);
// Slide paths left
var t = paths.attr('transform', null)
.transition()
.duration(duration)
.ease('linear')
t.attr('transform', 'translate(' + x(now - (limit - 1) * duration * timeMultiplier) + ')')
.each('end', tick)
你可能嘗試的另一件事是一次添加兩個點,即你跳過奇數刻度上的轉換,並在偶數刻度上移動兩倍 。 這會降低開銷,但會使動畫變得有點晃動(但不是很多,因為它也會播放得更快)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.