問題タブ [circle-pack]

以下のコードから 2 つの個別のクリック イベントを取得するにはどうすればよいですか

1.円をクリックすると「Circle Click」と表示されます。

2.その後、「背景がクリックされました」というアラートが表示された直後。

私が必要とするのは、両方のイベントを互いに独立させることです。そのため、「サークルクリック」は円をクリックしたときにアラートを出し、「バックグラウンドクリック」は背景、つまりチャートコンテナをクリックしたときにのみアラートを出します。

半径を定期的に更新するデータセットから、パック レイアウトで円を配置しました。

私が最初に使用したコードは、バブル チャートの標準的な例です: http://bl.ocks.org/mbostock/4063269

円のサイズが変わるたびに、それらは移行します。円が大きくなると、他の円と重なるように移動することがよくあります。私はそれらが互いに重ならないようにしたい。

私はまだd3にかなり慣れていないので、コードを何度も移動し、考えられることはすべて試しましたが、うまくいきませんでした。

関数makeBubblesには生の Json が渡されます (以下を参照)。

渡されるデータは次のようになります (データセットが更新されると変化します)。

強制指向レイアウトの各ノードにサークル パッキングを作成したいと考えています。例を探していますが、見つかりません。私はD3とinfovisが初めてです。いくつかのレイアウトを試しましたが、これを達成する方法がわかりません。

複数のレベル (深さ) を持つパック レイアウトがあり、そのうちのいくつかの最初のものが非表示になっています (例: http://bl.ocks.org/mbostock/4063269のように:

...ルートノードが隠されている場所）。

ただし、スケーリングは、表示されているものだけでなく、svg コンテナー内のすべての円をフィッティングすることによって機能します。これにより、いくつかのトップサークルが非表示になると、スペースが失われます...

コンテナ内の目に見える円だけに収まるようにレイアウトを再スケーリングするにはどうすればよいでしょうか? すべてのノードの極端な x/y 座標をチェックし、それに基づいて再スケーリングすることを考えました...

d3.js を使用して視覚化する一連のデータがあります。バブルの形でデータ ポイントを表しています。バブルの構成は次のとおりです。

xp、yp、colorp、radiusp は次のように定義されます。

この時点で、バブルはその位置 (位置は xp と yp によって定義される) で静的に表示されますが、バブルのサイズは基本的に radiusp から取得され、色は colorp によって定義されます。

今、私はこの例とまったく同じようにそれらを示しています: http://bl.ocks.org/mbostock/4063269

私が必要とするのは、それらを次の形式で表示することです: http://jsfiddle.net/andycooper/PcjUR/1/

つまり、重力関数を使用してパックする必要があり、ある程度の電荷を持ち、引きずり、ある程度互いに反発することができます。d3.layout.force() を使用する方法があることがわかりますが、実際にはそれをこれに統合することはできません..正しいパス、実際の例、またはヒントを提案していただければ、本当に感謝しています。ありがとうございました。

階層データ セットにバインドされたズーム可能なサークル パック レイアウトの例に基づくビジュアライゼーションがあります。

特定の深さの円の面積が直接比較できないという問題が発生しています。つまり、比率が 2 の値は視覚的に同じ比率の面積を持っているようには見えません。

パッキング アルゴリズムに何らかのエラーがあると予想されますが、次のログ スニペットが示すように、かなり重大です。

さらに掘り下げてデバッグを試みて喜んでいますが、そうする前に、アルゴリズムの理解が正しいことを確認したかったのです。つまり、単位値あたりの面積の比率は、すべてのレベルで理想的には一定である必要があり、少なくとも特定の深さでは一定でなければなりません?

サークルパックのサンプルをいじっています。しかし、JSON データの新しいセットから物事を更新し、後で更新しようとすると、多くの問題が発生します。

私のコードは、サークル パックのサンプルを修正したものです。

これは期待どおりに機能します。ただし、新しい JSON データからチャートを更新して更新する更新機能を実行したいと考えています。以下のコードを試してみましたが、古い要素を変更する代わりに新しい要素を追加するだけで、古い要素は削除されません (node.exit.remove() は明らかに実行されません)。「データ」の代わりに「データム」を使用することに関係があるのか​​ 、その点でデータ結合が実際に行われているかどうか疑問に思っています:

データが実際にパックにどのようにバインドされているか、およびそれを更新する方法を正確に理解するのに非常に苦労しています。私はおそらくもう一度単純なものを見逃していますが、これを説明するサンプルを見つけるのに苦労したので、どんな助けでも大歓迎です. 誰かがここで私を助けてくれれば、将来他の人のために喜んで作成します. :)

記録のために、私が使用しているデータは次のとおりです。

と