D3.js에서 즉석에서 데이터 줄이기

JSON 데이터의 원을 표시하는 D3을 사용하여 SVG를 렌더링하고 있습니다. 확대/축소 및 드래그를 지원하고 싶습니다. JSON 구조가 매우 커질 수 있습니다. 여기에 주요 문제가 있습니다 :D3.js에서 즉석에서 데이터 줄이기

모든 JSON 항목에 동그라미를 추가하는 것은 실제로 작동하지 않습니다. 페이지가 너무 느려져 DOM에 수천 개의 <circle> 요소가있을 수 있습니다. 나는 그것을 해결하는거야 어떻게

는 :

은 내가 드래그 기능에 업데이트 데이터 세트의 감소 사본을 보관.

var reducedData = [];

내가 설정 한 전체 데이터를 통해 이동 만 reducedData에 중심이 현재 축 주어진 볼 수 있습니다 그 좌표가 원을 밀어 각 드래그 이벤트에, 나는 빈 데이터 세트를 선언합니다. 그런 다음 SVG를 지우고 reducedData을 사용하여 다시 그립니다. 모든 줌 이벤트에서 동일한 과정을 수행하며, 현재 확대/축소 비율로 주어진 반경이 5보다 큰 원을 reducedData에 추가하는 것만 추가합니다.

페이지가 매우 반응적이고 잘 작동하는 것처럼 보이지만, 매우 비효율적이며 이것이 최선의 방법은 아니라고 확신합니다. 내 문제에 대한 대체 솔루션은 무엇입니까? 감사.

출처

2016-12-24 mogeb

function pointInDomain(d, domain) { return d.x < domain[1] && d.x > domain[0] } function zoomed() { xz = d3.event.transform.rescaleX(x); xGroup.call(xAxis.scale(xz)); var domain = xz.domain(); clippedArea.selectAll("circle") .style("visibility", d => pointInDomain(d, domain) ? "visible" : "hidden") .filter(d => pointInDomain(d, domain)) .attr("cx", d => xz(d.x)); }

관련 : [* "현재 표시되는 데이터의 SVG 노드를 렌더링?"* (/ Q/34653293). – altocumulus

'svg'를 버리고 '캔버스'기반의 [시각화] (https://bl.ocks.org/mbostock/d1f7b58631e71fbf9c568345ee04a60e)로 이동하고 싶을 것 같은데요. – Mark

물론 개선의 여지가 있지만, 귀하의 접근 방식이 이미 충분히 좋다고 생각합니다. 그 이상의 효과를 얻지 못할 수도 있습니다. 그러나 여기에 당신이 원한다면 당신이 고려하거나 시험 할 수있는 몇 가지 사항들이 있습니다. ...

우선 나는 어떤 최적화가 정말로 필요한지를 확인하기를 권합니다. Chrome의 최신 버전 인 DevTools의 '성능'탭에서 CPU 스로틀 링을 사용하여 느린 장치를 시뮬레이션 할 수 있습니다. 그런 다음 timeline tool을 사용하면 데이터 축소 또는 DOM 조작으로 인해 병목 현상이 발생하고 프레임 속도가 떨어지는 지 확인할 수 있습니다. 그렇지 않다면, 땀을 흘리지 말아라, 너는 좋다.

분석 결과 데이터 감소로 인해 렌더링 속도가 느려지는 경우 타임 라인 도구를 사용하여 속도가 느린 곳을 정확히 찾고보다 빠른 대안을 연구 할 수 있습니다.

반면에 DOM 조작으로 인해 문제가 발생하는 경우 실제로 필요한 경우에만 요소를 만들거나 제거하도록 general update pattern을 사용하고 있는지 확인하십시오. 또한 새로 생성하는 대신 서클 생성 속도를 duplicating them까지 높일 수 있습니다.

일반적으로 너무 많은 데이터 항목을 시각화해야하는 경우 최후의 수단으로 SVG에서 캔버스 기반 시각화로 전환하지만 상황에 따라 과잉이라고 생각합니다.

질문이 있으시면 도움이 되시길 바랍니다.

출처

2016-12-24 22:06:47 cvsguimaraes