問題タブ [circle-pack]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
2037 参照

javascript - d3.layout.packグラフでルートノードの円を中央に配置する方法は?

ここでd3.layout.pack グラフの例を再利用可能なモジュールにリファクタリングしています。しかし、ルートノードはもはや中心ではなく、犯人を見つけることができませんでした。

アプリの jsfiddleデモは次のとおりです。

何が問題なのか確認していただけますか?

0 投票する
1 に答える
1535 参照

javascript - D3 Zoomable Pack Layout で重複するラベルのテキストを非表示にする方法は?

D3 Web サイトで提供されている Zoomable Pack Layout を使用しています: http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

ここに画像の説明を入力

レイアウトが表示されると、円のすべてのラベルが表示されます。

問題は、互いに接近している小さな円の場合、ラベルが重なることです。ラベルの重なっているテキストを非表示にする方法があるかどうか知りたいですか?

「foreignobject」について読んだことがありますが、これが答えである場合、コードのどこにどのように組み込むべきかわかりません。

0 投票する
1 に答える
1926 参照

javascript - リアルタイム D3 バブル チャート (円パック)

d3.js でリアルタイムのバブル チャートを作成しようとしています。表示されるデータがネストされていない配列であるため、チャート自体は単純です。それはちょうど異なるサイズの泡です。

Ajax を介して MVC コントローラーからフェッチされた初期データを含む初期バブル チャートは、次のように作成されます。

最初のバブルの作成に追加されるのは、

関数。この関数は、MVC コントローラーから新しいデータをフェッチしてから遷移を実行する必要があります。遷移が完了すると、メソッドは再び自分自身を呼び出します。

更新の実行方法について、誰かが良いリンク、例、またはヒントを持っていれば幸いです。私はそれが次のようなものでなければならないと思います

  • 新しいデータを取得する
  • 新しいモデルを計算する
  • 新しくフェッチされたデータに新しい/なくなったノードを追加/削除します
  • 既存のすべてのノードの遷移を開始します

ヒントをありがとう!

0 投票する
1 に答える
112 参照

javascript - D3 サークル パック ベースの再利用可能なモジュールへの終了時の遷移の追加

d3.layout.pack グラフの例に基づく再利用可能なモジュールがあります。

ノード要素の終了時にトランジションを追加しましたが、トランジションは 1 つのデータ セットに対してのみ機能し、他のデータ セットに対しては機能していないようです。

基本的に、データ更新をシミュレートするために、次のsetInterval方法で関数を呼び出しています。

...そして、このようにトランジションを追加しました:

ファイルの下部にデータ更新セクションがあり、431 行目に終了遷移処理があります。

何が問題なのか確認していただけますか?

0 投票する
0 に答える
921 参照

javascript - d3.jsで棒グラフにバブルを描く方法

棒グラフにバブルを描画しようとしています。すべてのバーにバブルが表示されます。このバブルは別の json ファイルから生成されます。何か提案があれば教えてください。前もって感謝します。以下のコード。

棒グラフにバブルチャートを表示したいと考えています。

0 投票する
1 に答える
2343 参照

javascript - D3 サークル パック レイアウトのネストされたサークルのツールチップ

私はここで頭を叩いています。Zoomable Pack Layoutなどの構造でリーフ ノードのツールチップを表示したい。葉のノードは茶色のものです。ツールチップに標準コードを使用した場合:

プライマリ サークルではツールチップが表示されますが、リーフ ノードでは表示されません。私は試した:

...リーフノードに含まれる変数が存在する場合にのみ何かを返すことで、親ノードがツールチップを表示できないようにすることを期待していますが、何も表示されないようにする非表示のツールチップを許可するだけだったと思います。

何かご意見は?リーフノードが他のノードの前にくるように svg:circles をスタックするか、リーフノードにのみ svg:titles を添付する必要があると思いますが、その方法がわかりません。

ツールチップのフィドルは次のとおりです。 フィドル

0 投票する
1 に答える
624 参照

javascript - Mysql から JSON から D3js へのビジュアルなし...「クラス」識別エラー

D3 の新機能...

簡単な例を複製しようとしていますが、mysql からのデータを使用しています。列の名前を「名前」と「サイズ」に変更したので、簡単に移行できるはずです。行/項目!d.children;が処理するデータを制限しているか、コードにエラーがあると思われます。

既存の .json にクラスを追加するにはどうすればよいですか?

または

既存の .json を機能させるには、どのコードを削除する必要がありますか?

json.php

また、スクリプトにエラーがあると思いrootます(データであると思われます)。回答があるまで、私の研究でコードを更新し続けます。