問題タブ [dagre-d3]

Javascript アプリケーションで有向グラフを表示するために dagre-d3 を使用しています。デフォルトのノード形状は長方形です。私は楕円を好みますが、デフォルトをプログラムで変更する方法があるかどうかはまったくわかりません (たとえば、render.js で NODE_DEFAULT_ATTRS をハックしたくない)。助言がありますか？ご清聴ありがとうございました。

同じデータセットについては、以下の cytoscape.js と dagre-d3.js を参照してください。

1. サイトスケープ : https://jsfiddle.net/bababalcksheep/m40m5mmx/6/

2. dagre-d3: http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

cytoscape.js のエッジを dagre と同じにするにはどうすればよいですか?

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

cytoscape-dagre は dagre からポイントを選択すべきではありませんか? 例https://jsfiddle.net/bababalcksheep/55cmk117/3/dagre.layout(g);を参照してください。dagre の後にエッジ データにポイントがあり、サイトスケープ セグメント エッジによって消費される可能性があります。

d3.js に基づく dagre-d3 を使用しています。グラフがレンダリングされた後、すべてのコンテンツに合わせてズームし、中央に配置する必要があります。

ご覧のとおり、中央に配置できますが、身長が 400 であるため、すべてのコンテンツに収まらないようです。

他のダグレの状況に使用できるソリューションが必要であることに注意してください。たとえば、0.5 にスケーリングするだけでこの場合に適合する可能性がありますが、これは私が望むものではありません。

JSFIDDLE: https://jsfiddle.net/bababalcksheep/xa9rofm5/8/

コード：

ここの SVG ラベルの例を何とか適用できません: http://cpettitt.github.io/project/dagre-d3/latest/demo/svg-labels.htmlを流星に。

svg_edge_label が作成されますが、どういうわけかエッジに表示されません! これをレンダリングできないMeteorのユニークな点は何ですか? (私の Meteor アプリは perak:dagre-d3 パッケージを使用しています)

main.html:

main.js:

d3ノードからラベルの幅と高さを取得するためにしばらく取り組んできました。サブグラフを切り替えるノードにアイコンがあります。しかし、ラベルのサイズに基づいてノードの幅と高さを動的に設定する必要があります。ラベルの幅を取得したら、アイコン用のスペースを確保できます。ラベルのサイズは変わる可能性があるので、幅を知る必要があります。これが私が持っているものです。dagre-d3 を使用してノードを配置およびレンダリングしています。

これに苦労していて、どんな助けでも大歓迎です。必要に応じてさらに多くのコードを表示できます。

アップデート：

各ノードのテキストを取得するために私が行っていることは次のとおりです。

上記により、ラベル + トグル アイコンに基づいてノードの幅を設定できます。私が抱えている1つの問題は、ノードにサブグラフがある場合、「svgGroup.selectAll("tspan")」がトップレベルのノードのみを取得していることに気付きました。たとえば、私のノードは次のようになります。

「svgGroup.selectAll」ステートメントは、id 1 と id 2 のトップ ノードの tspan のみを取得します。id 10 と id 11 の subGraph ノードの tspan を取得する方法はありますか?その中にネストされたsubGraph。その場合、それらのノードのラベル幅も取得する必要があります。

パンとズームの動作を可能にする d3 グラフがあります。また、ユーザーが subGraph を展開および折りたたむことができる subGraph 機能も備えています。ユーザーがアイコンをクリックして subGraph を開いたり閉じたりすると、次のコードが実行されます。

基本的に、アイコンのクリック時にノードの subGraph プロパティを追加および削除しています。次に、グラフを完全に再描画します。

親コンテナーの x 座標と y 座標を取得できますが、グラフを再レンダリングする場合、グラフをレンダリングして、クリックしたときと同じスケールと平行移動を維持するにはどうすればよいですか?サブグラフ アイコンを切り替えます。サブグラフを展開または折りたたんで、以前と同じ位置にグラフを再描画しようとしています。以下は、グラフがレンダリングされるときに私と戦っているように見えるコードです。

トグル アイコンがクリックされたかどうかを確認すると、再描画される前と同じ縮尺と平行移動でグラフを再描画できますか?

ありがとう

私はDagre自分のhtmlで喜んで使用します。ここに私のjsコードがあります:

そして結果はデフォルトで垂直ビューです：

このような使い方で横表示にすることは可能Dagreでしょうか？