問題タブ [circle-pack]

d3js からバブル チャートを作成していますがTypeError: undefined is not a function、enter()メソッドで を受け取り続けています。私はほぼすべてを試しましたが、フィルターメソッドがnullを返しているという事実以外に、このエラーが発生する理由を特定できません。現在、バブル チャート自体は表示されません。

JsFiddle: http://jsfiddle.net/26Tra/

私が見る限り、update()、enter()、exit() は、データからビューを更新するために使用されます。GUIからデータを更新する別の方法もありますか?

たとえば、B-circle をクリックし、[削除] をクリックします -> GUI から削除されますが、データにはまだ存在します。[更新] をクリックすると、再び表示されます。

http://jsfiddle.net/stefanf/6Qm2z/33/

ps私は最初にjavascriptでデータを更新することでそれを行うことができましたが、私の質問は適切なd3-wayがあるかどうかです..

デフォルトの半径関数で d3 のパック レイアウトを使用しています。これにより、すべてがコンテナーに収まるように円のサイズがスケーリングされます。

この倍率にアクセスするにはどうすればよいですか?

したがって、この D3 ギャラリーの例と同じコードを使用しています (独自のデータを使用)。

http://bl.ocks.org/mbostock/4063269

円が中央に最大で、次に最小に放射状に配置されているバブル チャートを取得したいと思います。

Photoshop で作成したモックアップを次に示します。

この例を使用すると、次のようになります (デフォルトの並べ替えを使用したデフォルトの円パッキング アルゴリズム)。

並べ替えを微調整してみました (d3.ascending と d3.descending の試行を含む)。私が思いつくことができる最高のものは、基本的に定数で並べ替えを覆すだけです（ha！）が、それでも私が望むものからはほど遠いです：

では、実際の D3 パック レイアウト アルゴリズムを変更せずにこれを実行できる可能性はありますか? そうでない場合は、誰かがパック レイアウトを拡張または変更した可能性があり、これをハッキングするために D3 ソースで変更できる 5 行を教えてくれる可能性があります。

前もって感謝します！

編集：

リクエストに応じて、ここに私が使用しているコードがあります。上記のリンクされたサンプルと基本的に同じですが、コメント行で示されているようにいくつかの表面的な変更があります。

そして私のdata.jsonファイル：

私D3 circle packの見た目は次のようになります:( jsfiddle からもアクセス可能)

ただし、図を次のようにしたいと思います: (ラベルやサークル パックの配置に注意を払わないでください。これらは私の場合には必須ではありません。円の「3D」外観とその色を一緒に表示することを意味していました)

これを達成するための良い方法は何でしょうか?

@Delapouiteの回答の後、別のjsfiddleをまとめました：

キーコードは次のとおりです。

と

標準的な力のレイアウトで表されたグラフがあります。

ノードは、属性によってクラスター化できます。

これらのクラスターをパック レイアウトで表すことはできますか?

2 つのレイアウトはどのように共存し、ノードの x 座標と y 座標はどのように計算されますか?

編集
ノードクラスターを、クラスター階層を属性として含む個々のノードに変換するために、データを処理する必要があるかもしれないと考えています。可能であれば、データの再形成を強制しない別の方法を歓迎します。

これは、マルチ レイアウト アプローチに適合するように変換したデータセットの例です。ここでの問題は、クラスター内のどのノードもリンクできないことです。

私は、非常に大きなデータ セットを操作し、非常に大きな円グラフの配列を作成しようとしている D3 に比較的慣れていません。ただし、各円グラフの一番上にタイトルを配置する方法がわかりません。

私が使用しているデータは現在、このようなcsv形式であり、果物は円グラフに必要なラベルになります

以下に含まれるコードで機能するデータを以下に貼り付けました。また、最終的には、データをズームインして、次のようなズームアウト機能から見ることができるようにしたいと考えています:

http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

誰かがこれを効果的に伝えるためのアイデアを持っているなら、それは大歓迎です.

http://mbostock.github.io/d3/talk/20111018/pack.htmlのように、d3.layout.pack を使用して他のメイン サークル内に円を配置しています。

しかし、円の中に大きなテキストがあり、円を上書きし、近くの円の別のテキストを上書きできます:

私が考えることができる解決策は次のとおりです。

• 円を上書きしないようにテキストをカット
• 円のフォントを小さくします。
• より大きなパディングを設定する
• ツールチップを円の上にマウスを置く
• テキストを回転??

しかし、その考えは私をあまり満足させません。たとえば、この場合、2 つの小さいボールをより間隔を空けて配置したいと思います。

d3.layout.packサークルのオーバーライドを回避するために、さらに興味深いことができますか?

これに使えますd3.layout.forceか？何か案は？