2014-06-24 3 views
2

dc.js 및 crossfilter 사용과 관련하여 성능 문제가 있습니다. 몇 가지 사이클링 데이터 (코드 here, 데이터 here, 볼 수있는 here)의 다른 크기를 표시하는 그래프 세트를 생성합니다. 차트는 몇 초 또는 2 초 후에 렌더링되지만 그래프를 클릭하면 주요 성능 문제가 발생합니다. 즉, 지연 후 "스냅"전환 애니메이션과 약간의 괴롭힘입니다. 페이지의 맨 위에있는 빈 선 차트를 제거하면 세 개의 나머지 그래프가 정상으로 돌아 오는 전환으로 훨씬 더 잘 수행됩니다.dc.js/crossfilter 성능 문제 12,000 개 이상의 CSV 데이터 행

나는 비슷한 질문을 this one과 같이 보았습니다. 그러나 한 번에 여러 차원으로 나뉘어져 있지 않기 때문에 반드시 적용되는 것은 아닙니다. 12,000 개의 레코드가 크로스 필터가 처리 할 수있는 것의 상단에 도달하고 있습니까? 파일 크기는 약 1.4MB에 불과하므로이 크기에 문제가 있을지는 조금 놀라운 것 같습니다.하지만이 모든 내용이 내 부분에 대한 이해가 부족하다는 것을 보여줍니다. 내가 당황하게되면서 이것에 대한 어떤 조언이라도 크게 고맙게 여길 것입니다. 읽어 주셔서 감사합니다.

답변

2

일반적으로 크로스 필터 업데이트 속도가 느려지므로 대부분의 전환이 완료 될 때까지 브라우저가 멈 춥니 다.

나를 괴롭히는 유일한 이유는 dayOfWeek 차원에 대한 접근 자 함수에 2 개의 변수 선언이 있다는 것입니다. 데이터를로드 할 때 속성을 미리 정의하는 것이 좋습니다.

내가 볼 수있는 유일한 다른 문제는 데이터의 Date 개체와이를 기반으로 정의 된 차원입니다. 이러한 유형의 복잡한 개체를 사용하면 작업 속도가 느려질 수 있으며 (d3.js 날짜 구문 분석이 매우 빠르지 않음) Chrome 프로필러에서 주요 문제로 나타나지는 않습니다. 따라서 여기가 너를 늦추는 것 같아.

+0

감사합니다. Ethan. 내 직감은이 문제는 날짜 차트를 사용하는 유일한 차트이므로 차트에서 차트를 제거 할 때 문제가 발생하지 않는다는 것입니다. 이 문제를 조사해 주셔서 감사합니다. 또한 d3.csv() 내장 함수 대신 더 빠른 대안을 알고 계십니까? 다시 한 번 감사드립니다! – kylerthecreator

+0

꺾은 선형 차트에서 x 축에 대해 정의한 변수가 원인입니다. 처음에는 d3에서 일,시, 분, 초 모두를 구문 분석하고 crossfilter에게이 객체를 x 축의 단위로 사용하도록 알려 주려고했습니다. 이후 나는 x 축에서만 일이 필요하기 때문에 dayDim 변수를 사용하고 필요에 따라 다른 변수를 더 세밀하게 정의합니다. – kylerthecreator

+0

다행스럽게 생각합니다. 내가하는 것처럼 당신이 디버깅에 접근하고있는 것처럼 들리네. 나는 보통 일을 시작하고 다시 일을 추가 할 때까지 물건을 꺼내기 시작합니다 .--) 예를 들어, dateDimension 그룹화는 아마도 엄청난 그룹으로 이어질 것입니다! 좋은 캐치. –

관련 문제