使用dc.js的性能问题 [英] Performance issue using dc.js
问题描述
我正在尝试使用dc.js和bootstrap创建一个简单的仪表板.我要显示的图表是一个简单的序列图，其中三个不同的序列取自具有约9000条线的csv，从这些序列中选择的饼形图和用作日期范围选择器的条形图.
I'm trying to make a simple dashboard using dc.js and bootstrap. The charts I'm showing are a simple series chart with three different series taken from a csv with approximately 9000 lines, a pie chart to select from those series and a bar chart to act as a date range selector.
一切正常，但性能太差了.我认为这一定是由于我对交叉过滤器缺乏经验所致，例如( http://nickqizhu. github.io/dc.js/)使用6000条记录，并且执行速度非常快.有任何想法吗?我对缺乏具体性感到抱歉，但我在这里有点迷失了.
It all works correctly but the performance is horrible. I assume it must be due to my lack of experience with crossfilter, as the example (http://nickqizhu.github.io/dc.js/) uses 6000 records and performs really fast. Any ideas? I'm sorry for the lack of concreteness but I'm a bit lost here.
我的代码在这里:
d3.csv(sourceFile, function(error, data) {
data = data.splice(min,max);
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
data.forEach(function(d) {
d.Date = parseDate(d.date);
d.Year=d.Date.getFullYear();
d.Day = d3.time.day(d.Date);
});
var ndx2 = crossfilter(melt(data,["Date","Year","Day","date"],"Resource"));
var meltedDim = ndx2.dimension(function(d) {return d.Resource;});
var dateDim = ndx2.dimension(function(d) {return d.Date;});
var dateTypeDim = ndx2.dimension (function(d) {return [d.Date,d.Resource];});
var valueGroup = dateTypeDim.group().reduceSum(function(d){return d.value});
var dayDim = ndx2.dimension(function(d) {return d.Day;});
var volumeByDayGroup = dayDim.group().reduceSum(function (d) {
return d.value/50;
});
var yearDim = ndx2.dimension(function(d) {return +d.Year;});
var year_total = yearDim.group().reduceSum(function(d) {return d.value;});
var resourceDim = ndx2.dimension(function(d) {return d.Resource;});
var value_resource = resourceDim.group().reduceSum(function(d) {return 1;});
var minDate = dateDim.bottom(1)[0].Date;
var maxDate = dateDim.top(1)[0].Date;
var xAxisWidth = 1000;
var dateRangePicker = dc.barChart("#rangeTable");
dateRangePicker
.width(xAxisWidth).height(80)
.margins({top: 0, right: 10, bottom: 20, left: 65})
.dimension(dayDim)
.group(volumeByDayGroup)
.x(d3.time.scale().domain([minDate,maxDate]))
.gap(1)
.round(d3.time.day.round)
.elasticY(true)
.xUnits(d3.time.days)
.yAxis().ticks(4);
var chart = dc.seriesChart(htmlID);
chart
.width(xAxisWidth).height(600)
.dimension(dateDim)
.group(valueGroup)
.seriesAccessor(function(d) {return d.key[1]})
.keyAccessor(function(d) {return d.key[0]})
.valueAccessor(function (d) {return d.value})
.elasticY(false)
.ordinalColors(["#56B2EA","#E064CD","#F8B700"])
.x(d3.time.scale().domain([minDate,maxDate]))
.y(d3.scale.linear().domain([0,100]))
.elasticX(true)
.margins({top: 10, right: 10, bottom: 00, left: 10})
.brushOn(false)
.transitionDuration(1000)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.rangeChart(dateRangePicker)
.mouseZoomable(false)
.legend(dc.legend().x(xAxisWidth-65).y(10).itemHeight(13).gap(5))
.margins({ top: 10, left: 50, right: 10, bottom: 50 })
.yAxisLabel("Resource Percentage");
var resourceRingChart = dc.pieChart("#chart-ring-resource");
resourceRingChart
.width(170).height(170)
.ordinalColors(["#56B2EA","#E064CD","#F8B700"])
.dimension(resourceDim)
.group(value_resource)
.legend(dc.legend().x(75).y(63).itemHeight(13).gap(5))
.renderLabel(false)
.renderTitle(false)
.innerRadius(50);
//dc.renderAll();
dateRangePicker.render();
chart.render();
resourceRingChart.render();
function getvalues(d){
var str=d.key.getDate() + "/" + (d.key.getMonth() + 1) + "/" + d.key.getFullYear()+"\n";
var key_filter = dateDim.filter(d.key).top(Infinity);
var total=0;
key_filter.forEach(function(a) {
str+=a.Resource+": "+a.value+"%\n";
total+=a.value;
});
dateDim.filterAll();
return str;
}
$("#resetButton").on("click",function(){
chart.filterAll();
chart.y(d3.scale.linear().domain([0,100]));
chart.render();
dateRangePicker.filterAll();
resourceRingChart.filterAll();
dc.redrawAll();
$("#rangeSlider").slider("destroy");
$("#rangeSlider").slider({
range: true,
min: 0,
max: 100,
values: [0,100],
});
});
$("#axisButton").on("click",function(){
var min = $('#rangeSlider').slider("option", "values")[0];
var max = $('#rangeSlider').slider("option", "values")[1];
chart.y(d3.scale.linear().domain([min,max]));
chart.render();
});
$("#rangeSlider").slider({
range: true,
min: 0,
max: 100,
values: [0,100],
});
})
任何帮助将不胜感激.预先感谢.
Any help would be appreciated. Thanks in advance.
推荐答案
使用尺寸时，最好避免使用字符串，日期和复杂对象.将所有内容转换为整数，因为它会根据变量对数据内容进行排序.
When using dimensions, it's best to avoid strings,dates and complex objects. Turn everything you can into integers, as it sorts the contents of the data based on your variables.
这篇关于使用dc.js的性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
