라벨 D3에 힘 지시 노드 : 가시성 대 속도

Question

그러면서 D3 힘 그래프에 레이블을 추가하는 방법에 대한 또 다른 질문 ...

내가 개별 그룹 안에있는 노드와 그래프 라벨하고, 내가 추가 한 그래서 같은이 그룹 내부의 라벨 :

<svg> 
    <g class="nodes-with-labels"> 
    <g class="individual-node"> 
     <circle></circle> 
     <text>Node Label</text> 
    </g> 
    ... 
    </g> 
</svg> 

이 그래프에 최소한의 추가 요소를 추가하고 내 그래프의 tick() 기능이 하나의 transform 작업을 호출 할 수 있습니다. 그들은 노드를 포함 다른 그룹 전에 그려 그룹에 있기 때문에 https://jsfiddle.net/52cLjxt4/1/

는 불행하게도, 레이블이 노드의 많은 뒤에 결국 : 나는 (움직임/tick() 기능이없는) 여기 데모 바이올린을 넣었습니다. 이 문제는 this example에서와 같이 별도의 상위 그룹으로 노드와 라벨을 넣어 해결할 수 있습니다

https://jsfiddle.net/hhwawm84/1/

그러나

<svg> 
    <g class="nodes"> 
    <g class="individual-node"> 
     <circle></circle> 
    </g> 
    ... 
    </g> 
    <g class="labels"> 
    <g class="individual-label"> 
     <text>Node Label</text> 
    </g> 
    ... 
    </g> 
</svg> 

이 상당히 느린 것으로 보인다 : 그것은 더 많은 요소를 생성하고이 대신 문을 변환 필요 tick() 문에서 하나의 레이블을 사용합니다. 레이블을 개별적으로 이동하기 때문입니다.

속도는 내 프로젝트에서 가장 중요한 문제입니다. 추가 그룹을 많이 만들지 않고 transform 문을 두 배로 만드는 것을 피할 수있는 더 나은 방법이 있습니까?

Answer 1

g에서 각 라벨 및 원을 그리는 대신 각 요소에 직접 transform 속성을 설정하면됩니다. 또한 변환 대신에 cx/cy 및 x/y 속성을 설정하는 것이 유용 할 수도 있습니다. 그것은 아무튼 때문에 빠른 캔버스 (사용하려고 그 여전히 너무 느린 경우

for (var i = 0; i < 120; ++i) simulation.tick();

:

당신이 진드기를 미리 계산과 성능에 도움이 할 수있는 변환을 설정, 애니메이션 그래프가 필요하지 않은 경우

씬 그래프를 가지고 있지 않거나 CSS 엘리먼트를 html 요소로 변환합니다 (왜냐하면 그들은 gpu accelerated이기 때문입니다).