我下載了多個json數據文件,然後使用D3數據圖表可視化了這些文件。當我加載頁面時,需要大量的時間2-3分鐘來下載和可視化,甚至在移動設備上進行更多。瀏覽器顯示無響應的對話框。有沒有辦法提高加載時間和優雅地處理加載時間?瀏覽器在加載較大文件時無響應
每個文件是幾百(100 - 500)KB的並有20 - 200文件
這裏是線圖的示例代碼僅
drawLineChart
它下載JSON文件並提取數據從它,formatLineChartData
格式的數據輸入D3,最後lineChartConfig
繪製圖表。同樣有條形圖,餅圖,文字雲和地圖的功能。
var drawLineChart = function(lineChartData, suffix, el){
var n = lineChartData.length;
var dataArray = [];
var labels= '';
var allNull =true; // flag to check if every ajax does not return any data
for (var i=0; i<n; i++){
spark.loadCounterJSON(lineChartData[i].file + suffix,i,
function(res){
var data =res.values;
if(data){
if(lineChartData[res.counter].slug !== 'global'){
allNull = false;
}
var title = Object.keys(data.entities)[0];
graphValues = data[title];
if(graphValues!=''){
labels = data['properties'];
dataArray.push(
formatLineChartData(
graphValues,
lineChartData[res.counter].name,
true
)
);
}
}
if(res.counter === n && !allNull){ // all outer ajax done;
lineChartConfig(el,
dataArray,
false,
true,
''
,labels);
}
});
}
};
var formatLineChartData = function(graphValues, key, xDataType){
formatedData = [];
$.each(graphValues, function(i, v){
value = {};
if(xDataType !== undefined){
value['x'] = new Date(v.x);
}
else {value['x']=v.x;}
value['y']=parseInt(v.y)
formatedData.push(value);
});
return {values:formatedData,key:key};
}
var lineChartConfig = function (div, data, guideline, useDates, auxOptions,labels, width, height) {
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = width - margin.left - margin.right,
height = height - margin.top - margin.bottom;
//var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("right");
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var svg = d3.select(div).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dataResult;
for(var i=0;i<data.length;i++){
dataResult = data[i].values;
}
//console.log(dataResult);
dataResult.forEach(function(d) {
d.x = new Date(d.x);
d.y = d.y;
});
x.domain(d3.extent(dataResult, function(d) { return d.x; }));
y.domain(d3.extent(dataResult, function(d) { return d.y; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
svg.append("path")
.datum(dataResult)
.attr("class", "line")
.attr("d", line);
}
你的數據到底有多大?你有沒有考慮動態加載它? – 2014-09-24 16:49:34
我編輯問題。你是什麼意思動態加載它? – 2014-09-24 17:01:42
我的意思是說,也許你可以把你的內容分成小塊,最初只加載幾塊這些塊,並在初始加載後加載其餘塊。 – 2014-09-24 17:06:58