問題タブ [graph-layout]

すべての要素をグリッドに配置する必要があるグラフのレイアウト情報を生成しようとしています。すべての座標をグリッドボックスサイズの整数倍にします。

たとえば、1インチの正方形で構成されたグリッドがある場合、すべてのノード座標を72の倍数にします（間違っていない場合は、1インチのポイント数）。ドットの階層的なレイアウトが好きなので、できればそれを使いたいツールです。

要素属性リストを数回調べましたが、これを行う方法がわかりません。

編集：

GraphVizを選択した理由は、レイアウトを実行し、その情報をテキストとして返すことができるためです。他のツールはグラフをレンダリングしたいだけのようですが、他の場所でレンダリングしたいので、レイアウト情報を取得する必要があります。

私はテストにこのドットコードを使用しています:

グラフを作成するための私の Java コードは次のとおりです。

出力はこれです:リンク

ツリーのフォーマットが間違っているのはなぜですか? そして、ツリーを左から右に表示させる可能性はありますか?

これまで、graphvizのノード「label」、「URL」（または「href」）、「tooltip」属性を使用して、ノードにテキストラベルが付いたSVGグラフィックを生成し、マウスオーバーでツールチップを表示してノードをクリックしました。 （ブラウザがsvgを表示していると仮定して）URLターゲットに移動します（これらの文字列はすべて異なる場合があります）。

今、私はCytoscapeで同じ種類のものを生成しようとしています。svgのエクスポートはうまく機能しますが、ノードの外部URLへのリンクは、すべてCytoscapeの「リンクアウト」機能と結びついているようです。これは実際にCytoscapeを使用している間は非常に強力に見えますが、エクスポートされたSVGでクリック可能なノードまたはラベル（どちらかを選択します）を生成する方法があるかどうかはわかりません。リンクしたいURLは、インポートしたグラフのノード属性です。

エクスポートされたSVGにリンクを作成するCytoscapeに欠けているものはありますか？代替アプローチの提案はありますか？たとえば、ラベルを任意のHTMLにする方法（<a href=...>...</a>？

私の「プランB」は、エクスポートされたSVGを後処理することですが、Cytoscapeにすべてを実行させる方がよいでしょう。

次のモックアップをドットで実装したいと思います。

これまでのところ、私はこれだけ持っています：

私はそれを次のようにコンパイルします：

ドット -Gsplines=none test.gv | neato -n -Gsplines=ortho -Tpng -otest.png

それは私に近づきますが、知りたいことがいくつかあります。

1. Foo の右側だけでなく、左右にブロックを配置するにはどうすればよいですか? 私はまだそれを理解することができませんでした。

2. エッジ ラベルを一貫してエッジの上または下に配置することは可能ですか?

3. 右側のノードを左に、左側のノードを右に揃えるにはどうすればよいですか? 1つの可能性は、それらを同じ幅にすることです。これで問題ありません。

ありがとう！！

アップデート：

受け入れられた回答に基づいて、上記のように、ネイトにパイプされたドットを介して生成された、まさに必要なものである次のことを行っています。

家系図をグラフィカルに表現するためにpythonパッケージsimplepyged（gedcomファイルを解析するため）を使用する方法を知っている人はいますか？XY-Pic? マトリプロット？ピクテックス？

どんな助けにも感謝します！

ありがとう！

以前の質問 ( dot/Graphviz を使用したブロック図のレイアウト) の後、さらに質問があります。以下のようにコンパイルされます。

ドット -Gsplines=none test.gv | neato -n -Gsplines=ortho -Tpng -otest.png

私の質問は、たとえば、バズ ノードとダージリン ノードを左側に移動して、中間ノードの高さを下げる方法です。これは何が決め手なのかわからない。これは有向グラフであることを理解しています。したがって、図の一般的な「流れ」は左から右です。もっと制御したいと思います。

これらのダイアグラムは自動的に生成されるため、この特定の例で機能させるコード スニペットではなく、希望どおりにレイアウトする方法とその理由についての説明をお勧めします。

スプリング レイアウト アルゴリズム(一種の強制指向レイアウト)を使用して、ノードとエッジで構成されるグラフを描画したいと思います。グラフがレイアウトされたら、ユーザーがインタラクティブに新しいノードを追加できるようにしたいと思います。レイアウトの進化、つまり、以前の「形状」を維持しながら新しいノードを配置します（すでに配置されているノードをあまり動かさないでください）。

WordVisがhttp://www.wordvis.comで行っているようなことを意味します。

私は現在、GraphDraculaライブラリで利用可能な spring layouter を使用しています。これは「単純な」ものです。つまり、グラフを再レイアウトすると、まったく異なるレイアウトが得られる可能性があります (これはMath.rand、アルゴリズムでの呼び出しによるものだと思います)。

私がやりたいことをするためのアルゴリズム/戦略は何ですか?

グラフドラキュラのレイアウタが最初のノード pos をゼロに設定し、反復して最終ノードの位置を計算していることがわかります。newNodesに隣接するノードのセットを追加するとexpandedNodeします。既存の形状を維持するには、それぞれの最初の位置newNodesを の 1 つに設定expandedNodeし、すべてのノードにもう一度力を適用するだけで十分ですか?

グラフを一度レイアウトするだけでなく、描画をあまり変更せずにグラフ全体を再レイアウトする新しいノードを追加できるアルゴリズムへのポインターはありますか?

どんなヒントでも大歓迎です。

私は現在、javascript を使用していますが、言語は重要ではありません。

現在、neo4j を使用した Java プロジェクトに取り組んでいます。

Spring Data Neo4jを使用し、グッド リレーションシップブックからほとんどの情報を取得します。

このドキュメントでは、グラフの標準エンティティ タイプ表現はIndexingNodeTypeRepresentationStrategyであると述べています。

私たちのプロジェクトでは、サブリファレンス ノードを持つプロジェクトを優先します。

リポジトリを操作するときにこの戦略を使用するように neo4j を構成するにはどうすればよいですか。HelloWorld の例から始めたので、現在、次のようなリポジトリ インターフェイスがあります。

さらに、ノード エンティティがあります (関係のないコードのほとんどは省略します)。

TypeRepresentationStrategyを設定する方法の小さな例を誰でも提供できますか?

これはSpring構成で実行できますか?

構成は次のようになります。

編集：

別のセッションの後、私はついにそれを機能させることができました！Michael Hungers の回答に基づいて開始しましたが、Bean を作成できませんでした。彼の例がどこからのものかを見つけました: gitHub。ただし、これはまだうまくいきませんでした。TypeRepresentationStrategyFactory クラスのソース コードを詳しく調べ始めました。Strategy は非公開の列挙型であることがわかりました。これは、私が提供しようとした 2 番目のコンストラクター引数です。私のプロジェクトでは、タイプ Strategy としてそれを検出することはありませんでした。

ストラテジーは非公開なので、最初は少し懐疑的でした。つまり、タイプ Strategy が見つからないため、コードで TypeRepresentationStrategyFactory をインスタンス化することさえできませんでした。私はすぐに、Spring がそのようなことを実行できると思われることを知りました: Beans with private constructor。

最終的に、コンストラクターの引数をまったく識別していなかったため、Michael のソリューションを調整する必要がありました。私が何をしたとしても。多分それは私の設定です、私は本当に知りません。しかし、最終的に、プライベート列挙から Beanを作成し、これをコンストラクターへの参照として提供するソリューションを思いつきました。

ポイントの順序付けられたリストが与えられた場合、それらすべてを通過する滑らかな曲線を描きたいと思います。曲線の各部分は、水平、垂直、または指定された半径 r の円弧のいずれかになります (すべての円弧は同じ半径になります)。トランジションはスムーズである必要があります。つまり、ある部分の最後の見出しは、次の部分の最初の見出しと同じでなければなりません。任意の 2 つの連続する入力ポイント間に任意の数の円弧または直線セグメントを配置できます。

これは、直角に、または固定された曲率のセクションに沿って走る線路のようなものです。

そのような曲線を構築するための良いアルゴリズムはありますか? （または、そのような行が不可能な場合は、それを知りたいです。）

ベジエ曲線を調べましたが、やり過ぎのようで、制約を強制する良い方法が見つかりませんでした。

グラフのレイアウトができるJavascriptライブラリ/エンジンを探しています。（そして、私がレイアウトと言うとき、私は論理的に頂点をうまく配置することを意味します。）私が扱っているグラフはすべてm-aryツリーです。Mは通常5または6以下ですが、場合によってはそれより大きくなることもあります。

現在使用しているGraphvizのノードプログラムがあり、完全に機能します。問題は、Webアプリを実行しているときに、レイアウトが必要になるたびにサーバーにリクエストを送信する必要があることです。できれば、クライアント側ですばやく実行できるJavascriptで記述されたものが必要です。必要なのは、レイアウト情報（相対的な位置など）を提供することだけです。キャンバスに描画したり、SVGなどを使用したりするのに必要ありません。興味があるのは、レイアウトだけです。

jQueryやRaphaelJSのようなライブラリの使用は私には問題ありません。私はそれで働きます。私は物事を少しスピードアップするための何かを探しています。

また、レイアウトを行うためのアルゴリズムの良い説明を見つけることができれば、自分で書くことを検討したいと思います。しかし、私は本当にあまり時間をかけたくありません。私は今うまくいくものを持っているので、クライアント側でそれを取得することは単なるボーナスであり、必要ではありません。