の標識D3の力指向ノード：視認性の対スピード

Question

しかしD3力グラフにラベルを追加する方法について別の質問...

私は、個々のグループ内にあるノードとのグラフを標識していますし、私が追加されましたそのようなこれらのグループ内部ラベル：

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

これは、グラフに最小限の追加要素を追加し、私のグラフのtick()関数がちょうど1 transform操作を呼び出すことができます。私は（任意の動き/ tick()機能なし）ここでデモフィドルを置く：彼らは、ノードが含まれている他のグループの前に描かれているグループであるため https://jsfiddle.net/52cLjxt4/1/

は残念ながら、ラベルは、ノードの多くの後ろに終わります。この問題は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> 

しかし、これはかなり遅いと表示されます。それはより多くの要素を作成し、代わりに2変換ステートメントを必要としtick()ステートメントの1つのステートメントは、別々にラベルを移動しているためです。

私のプロジェクトでは、スピードが問題になります。たくさんの余分なグループを作成したり、transformステートメントを2倍にしたりすることを避けるより良いアプローチがありますか？

Answer 1

gでラベルとサークルを指定する必要はありません。各要素に直接transform属性を設定するだけです。また、変換の代わりにcx/cyとx/y属性を設定するプロファイリングの価値があるかもしれません。

あなたはダニを事前に計算して変換を設定すると、パフォーマンスを助けることができる、アニメーションするグラフを必要としない場合：

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

それはまだあまりにも遅いなら、キャンバス（より高速を使ってみて、それはdoesnのためシーングラフを持っているか、html要素をCSSで変換しています（より速いのはgpu acceleratedです）。