問題タブ [sunburst-diagram]

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 に答える
7711 参照

javascript - D3.js -- 外部データの読み込みと操作

私は D3.js を初めて使用し、さまざまなチュートリアル/演習/などで遊んでいますが、D3 の基本的な必要性は、外部データ (通常は JSON) をロードし、そのデータに基づいてインタラクティブなグラフを描画することです。

基本的なサンバーストの例は次のとおりです。

ここに画像の説明を入力

私はそれを自分のデータにうまく適応させました。ただし、データの配信を簡素化し、D3.js 内で一部の操作を処理したいと考えていました。たとえば、サンバースト ダイアグラムの準備が整った階層配列の代わりに、D3 で必要に応じて操作できるフラット データ ファイルを提供したいと考えています。

しかし、D3 のデータ関数の 1 つ以外でサンバースト チャートを描画する方法がわかりません。以下のコードを試してみましたが、json 経由でデータをロードする代わりに、インラインで含まれているため、構造が表示されます (当然のことながら、機能しませんでした)。

HTML は次のようになります。

私はかなり単純な何か間違ったことをしていると確信していますが、関数内に描画関数をネストしていない場合、D3 がすべてのデータを調べてダイアグラムをマップする方法を理解するのに苦労しています。 d3.json のように。

何かご意見は?

0 投票する
3 に答える
2505 参照

javascript - サンバースト データの視覚化 - 追加リング

データ視覚化の目的でこの素晴らしいフレームワークを見つけました: http://thejit.org/static/v20/Jit/Examples/Sunburst/example2.html

私のプロジェクトでは、4 つのリングが必要です。そこで、テンプレートJSに 2 つのリングを追加する方法を見つけようとしました。

基本的にはカスケード構造ですが、単純にレベルを追加するだけではうまくいきません。

2 つのレベルを追加する方法を知っている人はいますか?

同じように機能する別のフレームワークがある場合は、フィードバックをいただければ幸いです。

乾杯、D

0 投票する
2 に答える
786 参照

xslt - JSONからProtovisxlstへの変換ドラフトへのFreemind

私はフリーマインドで編集している非常に単純な分類法を持っており、それをサンバーストの視覚化としてプロトビスで視覚化したいと考えています。分類の深さは不明です。

私は、xslスクリプト機能を介したFreemindのエクスポートで使用できるXLST変換を構築する試みを作成しました-サンバーストを生成するためにProtovisが必要とする正確なJSON形式でデータを出力します-javascriptでそれ以上の変換は必要ありません。

私が探している出力JSON形式の例はここにあります:http: //mbostock.github.com/protovis/ex/sunburst.html

事実上、freemind.mmファイル形式が入力です。

スタイラススタジオでアルファコード(以下に表示)を実行すると、json形式(フォーマットが正しくないが合法的なようです)が構築され、スタイラススタジオから生成された出力を手動で.jsファイルに直接保存するとprotovisokにフィードされます。何らかの理由で、Freemindはこのコードを使用してデータをエクスポートしていないようですが...

足りないものはありますか?助けていただければ幸いです。

どうもありがとう、アンドリュー

=========== UPDATE =============

コードを修正しました。問題は、私のxslの一部がfreemindで使用されるxsltエンジンでサポートされていないことでした。コードを修正し、リベラルなライセンスの下でgithubに移動して、ここから削除しました。

アダプターはここから入手できます: https ://github.com/minkymorgan/Freemind2JSON#readme

  • アンドリュー
0 投票する
1 に答える
109 参照

javascript - 「Diskring」スタイルのチャート フレームワークはありますか?

ドリル ダウン ' Diskring ' スタイル チャートをサポートする JavaScript チャート スクリプト/フレームワークはありますか? 以下に示すように、セクションをクリックすると、チャートは次のレベルに再アニメーション化されます。

ここに画像の説明を入力

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

javascript - D3.jsでのサンバーストの移行

私はd3でデータ駆動型の視覚化を行っています。私はサンバーストに似た構造を持っています(ただし、単一のレイヤーで、中央に穴のある円グラフのようなものです)。

キーボードの矢印をクリックすると、視覚化されたデータが変化し、サンバーストが発生します。特に、innerRadiusはデータの特定のプロパティに応じて変化し、一部の要素が追加、削除、更新されます。

あるサンバーストから別のサンバーストに正しく移行することができません。既存の要素の更新を除けば、移行はほぼ問題ありません。

たとえば、次の2つのデータに共通の要素があります。

上記の例では、d3 WebサイトのSunburstの例のように、要素Aに対応するアークがスムーズに更新され、B要素とC要素が消え(そして私はそれを行うことができました)、D要素がスムーズに表示されるようにしたいと思います。成長する弧など。

私は一生懸命努力しましたが、常に次のようなコンソールログを取得しています。

データが一方と他方の間で変化するときに問題があると思いますが、それを解決する方法がわかりません。

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

javascript - svg.arc の innerRadius の遷移 - D3.js

これに密接に関連する質問があります。

例とは対照的に、サンバーストの innerRadius も遷移させる必要があるため、d3.svg.arc() の innerRadius プロパティを使用します。「d」の遷移に関して同様の方法で実行する必要があることは知っていますが(古いinnerRadiusを格納することでattrTweenを使用)、うまくいきませんでした。

なにか提案を?コードスニペットは素晴らしいでしょう!

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

javascript - パイの上にサンバーストを置くと、d3 のセグメントが欠落する

(最初にGoogleグループに投稿しましたが、応答がないため、ここに投稿する必要があると想定しています)。

パイ (黄色と白のセグメント) の上にサンバースト (色付きの円弧) を配置しようとしています。

問題を示す js フィドルを次に示します。最初の緑色のセグメントがありません。

http://jsfiddle.net/qyCkB/1/ :

ここに画像の説明を入力

そして、すべてのセグメントが正しく表示されるパイなしの js フィドル:

http://jsfiddle.net/X3sRy/1/

ここに画像の説明を入力

この行で作成された後、ノード変数を確認しました。

値は両方の例で同じように見えます。

DOM を確認すると、サンバーストの最初のいくつかのセグメントが描画されていません。

これは機能するはずですか、それとも 2 つの異なるレイアウトを重ねることはできないのでしょうか? 同じことを達成するためのより良いアプローチはありますか?

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

javascript - 円弧/要素の選択

サンバーストでは、すべてのアークが生成された直後に、コードにルートアークを選択させるにはどうすればよいですか?

たとえば、コードでは次のようになります。

中央の円弧をクリックすると、「d」として「関数」に渡されます。

(そのデータはjsonファイルの最初になります)

アップデート1:そのようにコードを変更する…</ p>

…問題を解決しました、それは戻りますobject

しかし、この解決策は正しく見えず、一般的ではありません。

アップデート2:いくつかの選択を試しました。例:

通常は次を返しますarray

または「未定義」

アップデート3

array子供がいるサイズ1の返品:

__data__私が探しているオブジェクトはどこにありますが、それを選択することができません。

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

d3.js - d3 サンバーストの不完全な遷移

私は sunburst-zoom の例 (d3 パッケージの /examples/partition/partition-sunburst-zoom) の上に構築していましたが、遷移が最終ポイントの「直前」で停止することがあることに気付きました。
これを修正するには、arcTween を次のように変更する必要がありました。

これにより、遷移の開始の一部が切り取られますが、ほぼ確実に一貫した状態で終了します。
元の partition-sunburst-zoom でもこの問題が発生しましたが、データと変更ほどではありませんでした。

それを修正する「きちんとした」方法を知っている人はいますか?

0 投票する
8 に答える
36980 参照

python - RまたはPythonでサンバーストプロットを作成するには?

これまでのところ、 John Staskoのようなサンバースト プロットを作成できる R ライブラリを見つけることができませんでした。RまたはPythonでそれを達成する方法を知っている人はいますか?

サンバースト