問題タブ [bundle-layout]
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.
javascript - D3 動的階層エッジ バンドリング - 双方向インポート
M Bostock ( http://bl.ocks.org/mbostock/7607999 ) の実装に基づいて、動的な階層エッジ バンドルを作成しようとしています。
私のデータセットの bl.ocks バージョンはこちらです: http://bl.ocks.org/ratnakarv/91ace0b5f77fff5ef0ab
ノード 1 とノード 2 の間の関係が一方向である元のデータとは異なり (つまり、ノード 1 がノード 2 をインポートするか、またはその逆)、私のデータ セットでは、ノード 1 とノード 2 は双方向のインポート関係を持つことができます。これはビジネス プロセス フローで非常に頻繁に発生するため、これを適用する予定です。
- 現在の課題:
この例では、'評価' は 'QOS 劣化レポートの作成' をインポートし、'QOS の作成...' は '評価' もインポートします。しかし、マウスが上にあると、「評価」、ノード - 「作成..」は赤で表示されますが、線は緑です。マウスがノードの「Create...」の上にある場合、インポート行と「Assess」が赤く表示されます。
- 望ましい要件:
私の要件は、双方向のインポートが存在する場合、次のいずれかです。1.ラインと他のノードを3番目の色(赤または緑以外)で表示するか、2.ラインと他のノードを赤で表示します。 .
これへのポインタは役に立ちます。私は D3 の基本的な知識を持っていますが、データ ビジュアライゼーションの専門家ではなく、仕事の分野でより良いコミュニケーションのためにビジュアライゼーションを使用しようとしているだけです。
javascript - 階層エッジ バンドリング 2 方向 - リンクの色
これは、この質問のフォローアップです: D3 動的階層エッジ バンドリング - 双方向インポート
元の問題は解決され、http://jsfiddle.net/w2rfwokx/1/に示されて います。つまり、ノード 1 とノード 2 の両方が相互にインポートする場合にオレンジ色のリンクがあります。しかし、この解像度には問題があるようです。これは、 http://jsfiddle.net/w2rfwokx/3/に示されているこの新しいデータ セットで明らかになります。
ノード 1 とノード 2 の両方が相互にインポートされ、ノード 1 が強調表示されると、ノード 2 はオレンジ色になりますが、これは必要な状態ですが、リンクはそうではありません。
コードは複雑なデータセットを考慮していないと思います。この複雑なデータ セットでは、ノード 1 がノード 2 をインポートし、ノード 2 がノード 1 をインポートし、ノード 3 がノード 3 をインポートします。
このコード ブロック内の一意のリンク配列の構成を変更する必要があることがわかります
私は何が変わるのかを見るのに苦労していますが。私はまだd3.jsを学んでおり、私の主な目的はこれをプロセス管理に適用することです
どんなポインタも役に立ちます
javascript - D3 階層エッジ バンドル - 初期リンクの色
階層的なエッジ バンドリングを使用します。
それは正常に動作します。しかし、jsonソースからのリンクの色を指定したい. どうすればいいですか?ドキュメントのリンクは単なる文字列です。追加のプロパティを提供することはできません。
javascript - D3 の非階層型 (グループ間にギャップがない) バンドル レイアウト
D3でバンドルレイアウトを作ろうとしています。ただし、エッジノード間にギャップがないように、非階層化(または疑似非階層化)したいと考えています。下の画像は、削除したいギャップの良い例として役立つことを願っています (異なる色のテキストの間の画像の上部を参照してください)。
私はこの 2 つの方法で解決しようとしました。ノード タイプを区別するタイプを一般的なタイプに置き換えることと、ノード タイプを作成者の名前に置き換えることです (これにより、すべてのノードを異なるタイプにし、等間隔にすることを強制します)。これらの試みの前者は、このクエリに応じて提案された提案に似ています。
ただし、ラインを実行すると
必然的に「Uncaught TypeError: Undefined のプロパティ 'parent' を読み取れません」というエラーが表示されます。コードが正しく機能するように、このデータにジェネリック ルートを強制するにはどうすればよいですか?
含まれている図のコード構造を生成するための私のコードは以下のとおりです。上記で提案した 2 つの解決策は、「パッケージ階層」機能内でコメント化されています。これは、 Bostock の階層的エッジ バンドリングのサンプルから派生したものであることに注意してください。
php - 階層的なエッジ バンドリングまたは放射収束ダイアグラム
サンプル @ https://gist.github.com/mbostock/1044242のようなデータを視覚化したいと思います。
ただし、SQL DB から取得した値からそうしたいと考えています。DB は現在、 http://msftdbprodsamples.codeplex.com/releases/view/97636から派生したオリンピックに関連するサンプル データを保持しています。その中に4つのテーブルがあります。例を説明すると、テーブル「メダリスト」の行は、テーブル「スポーツ」および「規律」に関連付けられています。
上記のリンクの「readme-flare-imports.json」に近いものは何も生成しないため、Eclipse 経由で d3.js によって読み取られるように、JSON でデータをフォーマットする PHP スクリプトを作成する必要があることはわかっています。次の私の試みを見てください(私はそれが受け入れられるとはほど遠いことを知っています)
試み:
私の質問は次のとおりです。-上記のリンクと私の試みを参照して、コードを変更して「sample_Olympics.json」を正しく表示するにはどうすればよいですか? DB に関係する階層があるかどうかはわかりませんが、放射状収束図の次に見つけられるのは階層エッジ バンドリングです。
javascript - バンドル補間によるsvgラインのd3遷移効果位置
次のコードを使用して、曲がった線を描画します。
.....
(パス要素を含むリンク)
しかし、線の位置を変更すると、新しい位置にスムーズに移動するのではなく、線がすぐに新しい位置にジャンプします。
パスの外観を定義する "d" XML コードは、バンドル補間によって生成されるため、非常に複雑です。
したがって、d3 はそれ自体で遷移を計算できないのではないかと思います。この問題の既知の解決策があるかどうか知りたいですか?