問題タブ [circle-pack]

円を設定された半径に制限するために、可変オーバーラップ/ジャミングを可能にする D3 サークル パック レイアウトを使用しようとしています。もちろん、既存の D3 サークル パック レイアウトでは、内側のアイテムを囲むように外側の円がスケーリングされますが、その外側の円を特定の値にする必要があります。

本質的に、オーバーラップを許可するために内側の円が必要ですが、外側の円に収まる程度に限られます。負のパディング値を試してみましたが、すべてのケースを特にうまくカバーするわけではなく、必要以上にオーバーラップしてしまいます。

誰にも提案がありますか？

私は D3 でのコーディングにかなり慣れていません。私は、ajax 呼び出しから基になるデータを取得し、データ値の変更に基づいてノードのサイズを変更する、ほぼリアルタイムの円パック チャートに取り組んでいます。私が直面している課題は非常に単純である可能性が高いですが、解決策として活用するのに十分な類似の例をオンラインでまだ見つけていません.

このコードを実行すると、データの変更に合わせてテキスト値が実際に適切に渡されていることがわかります。ただし、コードは更新された値を反映するように既存の要素を変更するのではなく、(更新された値を使用して) svg "g" ノードにテキスト タグを追加し続けます。その結果、別の方法では魅力的なバブルの真ん中にレイヤー化されたテキストの混乱が生じます。

私はd3.exit().remove()無駄に使用しようとしました - 私がそれを誤用した可能性があり、実際に適用するのに適切な手法である可能性があります.

2つの特定のことをどのように達成する必要があるかについて、誰かが喜んでガイダンスを提供してくれますか?

1）実用的でない限り、削除+追加ではなく、既存の「テキスト」要素を再利用したいと思います。

2) ページを更新せずに、既存の「テキスト」要素の値を新しいデータで更新したいと考えています。

.js ファイルの完全なコードは次のとおりです。「svg:svg」などの代わりに「svg」を使用できることは承知していますが、このファイルの整理段階にはまだ達していません。

良い ...

次の URL ( http://bl.ocks.org/mbostock/7607535 )からこの例を使用しています。

私の問題は、多くの円を挿入すると、一種の高揚感が作成されるため、メインの円が正しく塗りつぶされないことです。私の上司は、王子が円を塗りつぶすことを望んでいます。

コードとスクリーンショットを残します！

バブルチャートを作成しました。しかし、バブルごとに異なる色が得られません。どうすればそれができますか？円ごとに異なる色を付けるにはどうすればよいですか? そして、最高値の円データは常に他のバブルに囲まれた中心に来るはずです。

スニペット:

私のデータは次のとおりです。

バブル/サークル パック チャートの凡例を作成する必要があります。円の中に値を表示しています。伝説として名前が必要です。たとえば、以下のデータでは、値が 60 の場合、凡例に「Petrol」という名前が必要です。どうすればそれを達成できますか？

スニペット:

私のデータ:

json から値を取得して凡例を作成するにはどうすればよいですか? ありがとう。

D3JS をチャート ライブラリとして使用していて、バブル チャートの優れた機能を活用することに非常に興味があります。メインのD3JSチャート サイトでは、次のバブル チャートを使用して 2 つのデータ セットを比較しています。

バブル チャート。

このようなバブル チャートを作成する方法を実際に知っている人がいるかどうか疑問に思っていましたが、サイズ変数を使用してそれを機能させるのに苦労しています。

たとえば、2つのデータセットを比較できるようにしたいだけです。

ホスト名 (45,955,158) VS アクティブ サイト (21,335,629)

私が使用しているコードは以下のとおりです。JSON を使用してデータを取得します。私は js に関しては初心者であり、さらにこの jQuery ライブラリについても助けていただければ幸いです。

index.html

モバイル.json

js/js.js // JavaScript ドキュメント

d3.layout のパッキング アルゴリズムを少し変更できるかどうか疑問に思っていました。つまり、親ノードに触れる位置に最高値の子ノードを配置する代わりに、その中間に配置できるかどうかを知りたいです。現在、すべての子は、親の奥深くにある最小の子と螺旋状に進んでいるように見えます。

あまり混乱しないことを願っています。不明な点は喜んで説明します。

サークルパッキングに非常によく似た図があります

ある時点で、ユーザーはいくつかの異なるデータを見たいと思っています。明らかに、別のダイアグラムをすぐに表示できますが、知覚と認識の観点からは、遷移の方がはるかに優れています。注: 階層構造は同じままです。新しいノードや削除されたノードはなく、円のサイズの変更を決定する基礎となる値のみです。

構造が同じで値が異なる2 つのサークル パック グラフ間でこのようなスムーズな遷移を実装するには、どのような方法がよいでしょうか?

(もちろん、遷移中、つまり 10 秒続くとします。元のグラフのように円間の関係を維持する必要はありません。円は交差して別の円を通過できます)

treemapsにも同様の解決策があることは知っています。ただし、サークルパッキンには一切適用できません。ツリーマップには、そのような場合に役立つ特別な関数 sticky() さえあります。

編集: jsfiddleの新しいバージョンを添付しています。

一部の機能が動作するようになりました。ランダムなデータで駆動されるトランジションは美しいです。

現時点で懸念事項が 2 つあります。

1. ツールチップを更新する方法がわかりません。これは重要です。ユーザーはツールチップを介してデータ ポイントを識別できる必要があります。一方、移行中に補間する必要がないのは良いことです。突然の変更で十分ですが、その方法がわかりません。
2. 私は本当にコードを理解していません。コーディングはほとんど試行錯誤のプロセスでした。誰かがコードが良いか、良くないか、または異なる可能性があることを確認していただければ幸いです。

EDIT 2:私は問題を解決し、誰かがコードを必要とする場合は答えに jsfiddle を添付しました。誰もが解決策についてコメントすることを歓迎します。

コードの最も重要な部分は次のようです。

ヘルプやヒントをお寄せいただきありがとうございます。