이것은 dc.js/d3.js/crossfilter.js 주제에 대한 두 번째 질문입니다. 기본적인 개인 대시 보드를 구현하려고하는데 시간이 지남에 따라 측정 항목을 출력하는 매우 간단한 lineChart (rangeChart가 연결된)를 만드는 것으로 시작했습니다.8k + 항목의 dc.js lineChart 성능 문제
데이터 내가 JSON로 저장하고 다음과 같습니다 (나는 또한 날짜 형식을 유지 JSON를 사용하는 지금 그래서, 이후 단계에서 MongoDB를 인스턴스에 저장됩니다) :
[
{"date":1374451200000,"prodPow":0.0,"consPow":0.52,"toGridPow":0.0,"fromGridPow":0.52,"prodEn":0.0,"consEn":0.0,"toGridEn":0.0,"fromGridEn":0.0},
{"date":1374451500000,"prodPow":0.0,"consPow":0.34,"toGridPow":0.0,"fromGridPow":0.34,"prodEn":0.0,"consEn":0.0,"toGridEn":0.0,"fromGridEn":0.0},
{"date":1374451800000,"prodPow":0.0,"consPow":0.42,"toGridPow":0.0,"fromGridPow":0.42,"prodEn":0.0,"consEn":0.0,"toGridEn":0.0,"fromGridEn":0.0},
...
]
나는 약 22000 개의 항목이 있으며, 대시 보드를 열 때 많은 성능 문제가 발생합니다.이 있습니다. 8000 개의 레코드 집합으로 데이터를 조각하려고해도 성능은 여전히 좋지 않지만 적어도 렌더링은 일정 시간이 지나면 끝나며 데이터와의 상호 작용은 끔찍합니다. dc.js와 crossfilter.js가 100k + 항목과 하나 이상의 차원에서 어려움을 겪을 것으로 예상하기 때문에 코드에 약간의 함정이 있다는 것을 짐작할 수 있습니다!
그럼에도 불구하고 크롬으로 프로파일 링하고 온라인으로 읽는 것이별로 도움이되지 못했습니다 (나중에 변경하려고 시도한 것에 대한 자세한 내용). 여기
내 graph.js 코드 : 나는 몇 가지 CPU 프로파일 링을 수행하는 크롬 개발 도구를 사용queue()
.defer(d3.json, "/data")
.await(makeGraphs);
function makeGraphs(error, recordsJson) {
// Clean data
var records = recordsJson;
// Slice data to avoid browser deadlock
records = records.slice(0, 8000);
// Crossfilter instance
ndx = crossfilter(records);
// Define Dimensions
var dateDim = ndx.dimension(function(d) { return d.date; });
// Define Groups
var consPowByDate = dateDim.group().reduceSum(function (d) { return d.consPow; });
var prodPowByDate = dateDim.group().reduceSum(function (d) { return d.prodPow; });
// Min and max dates to be used in the charts
var minDate = dateDim.bottom(1)[0]["date"];
var maxDate = dateDim.top(1)[0]["date"];
// Charts instance
var chart = dc.lineChart("#chart");
var volumeChart = dc.barChart('#volume-chart');
chart
.renderArea(true)
/* Make the chart as big as the bootstrap grid by not setting ".width(x)" */
.height(350)
.transitionDuration(1000)
.margins({top: 30, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
/* Grouped data to represent and label to use in the legend */
.group(consPowByDate, "Consumed")
/* Function to access grouped-data values in the chart */
.valueAccessor(function (d) {
return d.value;
})
/* x-axis range */
.x(d3.time.scale().domain([minDate, maxDate]))
/* Auto-adjust y-axis */
.elasticY(true)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(80).y(10).itemHeight(13).gap(5))
/* When on, you can't visualize values, when off you can filter data */
.brushOn(false)
/* Add another line to the chart; pass (i) group, (ii) legend label and (iii) value accessor */
.stack(prodPowByDate, "Produced", function(d) { return d.value; })
/* Range chart to link the brush extent of the range with the zoom focus of the current chart. */
.rangeChart(volumeChart)
;
volumeChart
.height(60)
.margins({top: 0, right: 50, bottom: 20, left: 40})
.dimension(dateDim)
.group(consPowByDate)
.centerBar(true)
.gap(1)
.x(d3.time.scale().domain([minDate, maxDate]))
.alwaysUseRounding(true)
;
// Render all graphs
dc.renderAll();
};
- d3_json가 구문 분석 상단은 약 70ms (#records와 무관)
- 2000 레코드 :
- make_graphs은 1s 미만으로 약간 걸립니다.
- 치수 집계 11ms;
- 그룹 집합체 약 8ms;
- dc.lineChart 약 16ms 소요;
- dc.barChart 약 8ms 소요;
- 렌더링은 약 700ms (lineChart의 경우 450ms) 소요됩니다.
- 데이터 상호 작용이 매우 부드럽지는 않지만 여전히 충분합니다. 8000 개 레코드
- :
- make_graphs는 기가 주위에 소요;
- 치수 집합체 약 80ms;
- 그룹 집합체 약 55ms;
- dc.lineChart 약 25ms 소요;
- dc.barChart 약 15ms 소요;
- 렌더링은 5.3 초 (lineChart의 경우 3 초)입니다.
- 데이터 상호 작용은 끔찍하며 필터링에는 많은 시간이 걸립니다.
- 모든 기록은 브라우저가 멈추고 스크립트를 중지해야합니다.
이 thread을 읽은 후 날짜가 문제가 될 수 있다고 생각하여 코드 대신 날짜 대신 숫자를 사용하도록 수정했습니다. 여기에 (I 변경 사항 만 적어 것) 내가 수정 한 것입니다 : 눈에 띄는
// Added before creating the crossfilter to coerce a number date
records.forEach(function(d) {
d.date = +d.date;
});
// In both the lineChart and barChart I used a numeric range
.x(d3.scale.linear().domain([minDate, maxDate]))
불행하게도 아무것도 성능이 많다는 변경되지 않습니다. 여기 당신이 원하는 경우 github link입니다 :
이편집 ... 나는이 문제를 해결하는 방법에 대한 단서가 없다 실제로 나는 대시 보드에 더 많은 그룹, 치수 및 차트를 추가하고 싶습니다 내 코드를 직접 테스트 해보십시오.
: 귀하의 브라우저로 이동 한 후python3 dashboard.py
과 :
이pip3 install flask
대시 보드를 실행 : 당신은 그냥 플라스크에 설치해야하므로
나는, 서버 측에 대한 python3 및 플라스크를 사용localhost:5000
물론이 게시물에 링크를 추가했습니다. 시간 내 주셔서 감사드립니다. – Bertone