問題タブ [graph-visualization]

D3.jsライブラリを使用してツリーを描画する次の JavaScript コードがあります (さまざまなオンライン チュートリアルで見つけることができる標準的な構造に従います)。

JSFIDDLE

頂点に奇数の子 (1、3、...) があるツリーを除いて、ほとんど問題なく動作します。この場合、奇数頂点のエッジは描画されません (たとえば、上記の例では、A と B の間のエッジは表示されません)。私は何が欠けていますか？

配列の個々の日付がないため、配列インデックスを d3.js の時間範囲にマップしようとしています。値が 1900 から 2000 の間であることはわかっています。

各配列値の日付を手動で計算するよりもスマートな方法はありますか? おそらく、ステップとインクリメントを計算しますか？

42 個の変数があり、Matlab でそれらの相関行列を計算しました。次に、スキーマボールで視覚化したいと思います。Matlabでこれを行う方法について提案/経験はありますか? 次の写真は、私の要点をよりよく説明しています。

写真では、変数間の各放物線は、変数間の相関の強さを意味します。線が太いほど、相関関係が高くなります。私は、相関関係の強さを強調するために異なる色を使用した写真 2 のスタイルよりも、写真 1 のスタイルを好みます。

Highstock (Highcharts) ライブラリを使用して、A )ここ(または図 1 を参照) のようにフラグを追加することと、B) addPoint関数 (例:ここを参照)を使用してデータを動的に更新することをどのように組み合わせるかを考えています。addPoint関数にはそのための機能がないようです。series.addPoint([x, y], true, true)

図1

私はこのSOの質問を見てきました。しかし、既存のデータセットにフラグを追加しているようです。データ ポイントと関連するフラグを同時に追加できますか?

どんな助けでも大歓迎です。

ありがとう

===編集===>

@セバスチャン坊ちゃん

応答していただき、実際の例をありがとうございます。しかし、何らかの理由で、セットアップでaddPointが機能しません。

このjsfiddleを見てください。私がしていることは、i) への呼び出しで初期グラフをセットアップし(chart-fill …)、次に ii) (chart-increment …)1 ポイントを追加する呼び出しを行い、すぐにそのポイントに 1 つのフラグを追加しようとすることです。動作していない部分は(-> ($ selector) (.highcharts) (.-series) (nth 9) (.addPoint { :x 1234567 :title "fubar"} true false)). これは、私が期待するようにフラグを追加していません。

5 つのグラフの上に 11 シリーズを重ねました。これには、タイプ「フラグ」の 1 つのシリーズが含まれます。シリーズが非常に多いため、そのうちの 1 つを参照する際に問題が発生したのではないかと思いました。しかし、私のシリーズを調べてみると、この旗は確かに 9 番目のものであることがわかります。

Clojurescript コードも使用しています。しかし、それ以外の場合はグラフが適切にレンダリングされるため、それは問題ではないと思います。何か案は？

D3 ネットワークの視覚化に取り組んでおり、レイアウトを微調整しようとしています。ノードは大学のコースを表し、エッジは前提条件を接続します (たとえば、コース A がコース B の前提条件である場合、A から B への有向エッジがあります)。「AND」と「OR」を表す小さなノードもあります。たとえば、コース C を実行するためにコース A またはコース B が必要な場合、A と B から「OR」ノードを指すエッジがあります。 、および「OR」ノードから C へのエッジ。これらのネットワークは、ユーザーが選択した一連のコースに基づいて動的に生成されるため、ノードの数は数個から数百個の範囲になります。

コース ノードは、年 (1、2、3、または 4) で分類できます。現在、SVG を 4 つの水平バンドに分割しています。tick()関数では、各ノードが正しいバンドにあるかどうかを確認し、そうでない場合は正しい方向に微調整します。この種の機能は、上から下への「流れ」を維持するために機能しますが、ノードが他のノードの後ろに引っかかって、正しい場所に到達しないことがよくあります。

また、最終的なネットワークでノードをオーバーラップさせたくないので、衝突検出を使用してノード間に常にスペースを確保しています。

これらは役に立ちましたが、私が得たレイアウトにはまだ満足していません. データの性質上、エッジは常に横または下を向いている必要がありますが、上を向いていません (つまり、1 年目または 2 年目のコースは 2 年目のコースの前提条件になる可能性がありますが、3 年目のコースはそうではありません)。それは実際には木ではありませんが、ある程度の方向性があります。この制約を実装する方法はありますか? 強制指向ツリーのアプローチを試しましたが、定数を増やしても、制約は十分に強くありませんでした。正しい方向にそっと微調整するだけですが、ノードが他の力のために「動かなくなった」場合、それらは止まる。矢印の方向を「最強」の制約 (電荷や重力などの反発よりも強い) にすると、ノードがよりうまく整理されると思います。

D3 を使用するのはこれが初めてで、すでに多くの作業が行われています (D3 フォース レイアウトの組み込みパラメータ、年ごとの編成、衝突検出)。

編集：

tickエッジを処理する関数の一部にこれを追加してみました:

私のアイデアは、ターゲットがソースの上にある場合、両方を強制的に真ん中に合わせることができるというものでした. これはある程度機能していますが、衝突検出が競合する点で少しバグがあります。2 つのノードが衝突している場合、それらは離れて移動するはずですが、それらの間のエッジが上を向いている場合、それらは一緒に押される可能性があります。これにより、一部のノードが奇妙に跳ね返ります。また、矢印の端の一部がノードに接続されなくなります。これを修正する方法について何か提案はありますか?

編集＃2：

前回の編集で追加したコードをまだ使用していますが、年ごとにノードをレイヤーに分割するコードを削除しました。また、これを衝突検出用の「衝突」関数に追加し、アルファ値を渡します。

これにより、レイアウトの終わり近くで衝突検出の制約が強くなります。これは、ノードが適切なレイアウトに向かう途中で「スタック」するのを防ぐため、良いことです。最終的なレイアウトで重なっている場合にのみ、移動中にノードが重なってもかまいません。これにより得られるレイアウトにかなり満足しており、「ぶつかり合う」ことのほとんどが解決されたようです。ただし、他のアイデアがある場合は、共有してください。

D3 を使用して、グラフのマルチレベル階層をプロットしようとしていました。アイデアは次のとおりです。グラフの場合、マルチレベルのクラスターがあります (レベル 0 はグラフの頂点のセット、レベル 1 はレベル 0 ノードで行われるクラスタリング、レベル 2 はレベル 1 ノードで行われるクラスタリングなど)。マルチレベル クラスタ部分はツリーであり、レベル 0 ノードはグラフを形成します。
ツリー部分を (関連するクラスターに) 折りたたみ可能として表示したいが、レベル 0 ノード間のエッジを表示したい。このオレンジ色のノード間にエッジがある場合のようなものです。
誰もこれを試みましたか？どうすればこれを達成できますか？

D3 ネットワークが適切なレイアウト (アルファが 0 に達した) に達した後、フリーズさせようとしています。ノードがドラッグされた場合でも、強制を完全に停止したい (ユーザーはノードを手動で再配置できる必要があります)。ノードの mousedown と mouseup で呼び出される関数を変更することで、これの 2 番目の部分を行う方法を知っていると思います。ただし、元のレイアウトとフリーズが機能しません。

レイアウトが完了した後にのみネットワークが表示される「静的」強制レイアウトの例を見てきました。ただし、ネットワークが安定したレイアウトに到達しているため、ネットワークを表示したいと考えています。これを、ネットワークを描画する関数の最後に追加しました。

この追加により、ネットワークは になるまで表示されませんforce.stop()。「カチカチ」しているときに表示する方法を知っている人はいますか?

編集:これが関数の私の実装ですtick:

プログラムを使用してgraphvizファイルを作成し、pngドットを使用して図を生成しています。ときどき、読み込まれないほど大きなファイルになってしまうことがありますeog（GNOMEの目）。私のグラフは白黒だけなので、サイズが最小化され、あまり失うことなくズームインおよびズームアウトできるような図を生成するため-Tに使用するときに、どのオプションに渡す必要があるのか​​ 疑問に思っていました.dot