ここにjsfiddleがあります:

これは、たとえば 2 つの政党があり、複数の投票単位または同様に構造化されたデータで選挙結果を提示したい場合に非常に適しています。

ただし、これを視覚的に表現する必要があります: (2 ではなく 5 つの政党) (「議席」以外のすべての行は無視してください。「議席」のみを視覚化する必要があります)

circle packそれぞれの中に入れたいと思いますforce layout node。

たとえば、21、12、2、1 に比例する面積を持つ 4 つの小さな円を含む BC というバルーンがあるはずです (1 つの政党は BC 州で議席を獲得しませんでした - ブリティッシュ コロンビア州)。カナダのすべての州についても同様です。 .

これが可能かどうか、および/またはコード構成の概要を教えていただけますか?

circle pack layout円自体に沿って流れるテキストでいくつかの円にラベルを付けようとしています。

実験的なjsfiddleの 1 つを次に示します。

ご覧のとおり、上部を中心にして円に沿ってテキストをレンダリングできます。ただし、湾曲した SVG テキストのブラウザのレンダリングはひどいものです。しかし、私たちはそれを気にしないとしましょう。

ここに別のjsfiddleがあります

次の条件下で、このグラフに曲線ラベルを配置したいと思います。

• 円は州を表します (深さ == 1 のみ) (BRITISH COLUMBIA、ALBERTA など)
• 州のすべての子供のサイズ (つまり、割り当てられた議会の議席数) の合計が 5 を超えています。
• 州の名前はすべて大文字にする必要があります。

コード自体で私の試みのいくつかを見ることができます。私は何時間も努力してきました。私の主な問題は、円内の円が XY 空間のどこかにあるのに対し、最初の jsfiddle では、すべての円が座標系の原点に中心を持っていることです。

たぶん、これを再検討することで私を助けることができます。

基礎となるデータは、次の表に基づいています。

(注: これは、先日私が尋ねた「D3 フォース レイアウトのノードとしての円パック」という質問に多少関連していますが、これは独立した実験です。)

d3.svg.arc() の代わりに通常の SVG アークを使用することにしました。今でも正しい判断だと思います。ただし、ここに私が今持っているものがあります::) jsfiddle

d3 サークル パッキング アルゴリズムを使用しています。内側の円が利用可能なすべてのスペースを占有するように設定されています。したがって、同じサイズの 2 つの円があり、1 つには 3 つのサブ円が含まれ、もう 1 つには 50 のサブ円が含まれている場合、3 つが非常に大きく表示されます。

内側の円が特定のサイズを超えないように、スクリプトに簡単な変更を加えることはできますか? おそらく中心に浮かんでいますか?

ソースはこちら：

https://github.com/mbostock/d3/blob/master/src/layout/pack.js

http://bl.ocks.org/mbostock/raw/4063269/のようにバブル チャートを作成する方法:

...しかし、NVD3 を使用していますか?

NVD3 サイトには、散布図への参照のみがありますhttp://nvd3.org/ghpages/scatter.html

json ファイルに保存されている受信データをリアルタイムで視覚化する作業を行っています。視覚化には D3 を使用します。これは私が使用するチャートです: http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

これはすべてのコードページです:

サーバーから取得した新しいファイルからグラフを動的に更新したかったのです。しかし、この関数を使用すると、古いチャートに新しいチャートが描画されます。チャートを更新するために別のソリューションを試しましたが、どれも機能しませんでした。動的に更新するには、コードをどのように変更する必要がありますか?

一部のエンティティの値がゼロのパック レイアウトがあります。それらのデフォルトの半径を設定する方法を見つけようとしています。ドキュメントによると、私はこのようなものを書くことができることを望んでいました

しかし、「oldRadiusFunction」にアクセスする方法を特定することにこれまで成功していません。

これを解決するのに最も近いのは、次のことです。

... 関数内から this.pack にアクセスするため。これは最初はうまくいくように見えますが、グラフの更新を開始すると奇妙な結果が得られ始めます。

とにかく、どんな助けでも大歓迎です、あなたの注意と入力に感謝します!

編集：ドキュメントの内容は次のとおりです

pack.radius([半径])

radius が指定されている場合、各ノードの半径を計算するための radius 関数を設定します。radius が null の場合、デフォルトでは、半径はノード値から自動的に決定され、レイアウト サイズに合わせてスケーリングされます。radius が指定されていない場合は、現在の radius 関数を返します。デフォルトは null です。半径は、均一な円サイズの定数として指定することもできます。

私の目標 (少しナイーブかもしれません) は、引数として 0 を渡したときに MIN_RADIUS を返す関数を渡すか、他の値に対してデフォルトで返されるものを返すことです。

子が親サークル内に表示される d3.js サークル パッキングの例があります。

http://strongriley.github.io/d3/ex/pack.html

子が親円の周囲に表示される例はありますか?

たとえば、次のようにデータを表示したいと考えています。

次のように表示される代わりに:

助けてくれてありがとう！