javascript - d3 力有向グラフのノードを円、多角形、または雲で囲む

Question

グループ化されたノードを持つd3強制有向グラフを作成しました。グループを雲のような構造で囲みたいと思います。これどうやってするの？

グラフの Js Fiddle リンク: http://jsfiddle.net/Cfq9J/5/

結果は次の画像のようになります。

Answer 1

これはトリッキーな問題であり、パフォーマンスの高い方法でそれを実行できるかどうかは完全にはわかりません。ここで私の静的実装を見ることができます：http：//jsfiddle.net/nrabinowitz/yPfJH/

ここでの動的な実装は、非常に遅くて不安定ですが、http：//jsfiddle.net/nrabinowitz/9a7yy/

実装に関する注意：

• これは、各円をそのグループ内の他のすべての円でマスクすることによって機能します。衝突検出でこれをスピードアップできるかもしれません。

• use各円はレンダリングされ、マスクとして使用されるため、各ノードの円を参照するために要素が多用されます。実際の円はdef、再利用のためにレンダリングされていない定義である要素で定義されます。これを実行すると、各ノードは次のようにレンダリングされます。

  <g class="node">
      <defs>
          <circle id="circlelanguages" r="46" transform="translate(388,458)" />
      </defs>
      <mask id="masklanguages">
          <!-- show the circle itself, as a base -->
          <use xlink:href="#circlelanguages" 
              fill="white" 
              stroke-width="2"
              stroke="white"></use>
          <!-- now hide all the other circles in the group -->
          <use class="other" xlink:href="#circleenglish" fill="black"></use>
          <use class="other" xlink:href="#circlereligion" fill="black">
          <!-- ... -->
      </mask>
      <!-- now render the circle, with its custom mask -->
      <use xlink:href="#circlelanguages"
          mask="url(#masklanguages)"
          style="fill: #ffffff; stroke: #1f77b4; " />
  </g>
  

• ノードサークル、リンク、テキストをそれぞれ異なるgコンテナに入れて、適切にレイヤー化します。

• フォントサイズではなく、ノードデータにデータ変数を含める方がよいでしょうfontSize。円の半径に使用するには、プロパティを整数に変換する必要がありました。それでも、テキストの幅はデータ値に関連付けられていないため、その下の円よりも大きいテキストが表示されます。

• 最初のノードの円が静的バージョンで正しく配置されていない理由がわかりません。動的バージョンで機能します。神秘。