問題タブ [dagre-d3]

私は大学生協で、現在チームの Web ページ プロジェクトを開発しています。最初に、dagre-d3 ライブラリを使用してグラフを作成することにしましたが、Chrome で問題なく動作しました。次に、SVG の ForeignObject 要素が IE で機能しないことに気付きました (IE はたまたまサポートする主要なブラウザーです)。

私の目標は本質的に各グラフ コンポーネントに HTML コンテンツを入力することなので、まだ dagre-d3 を使用している IE でこれを実装するための回避策があるかどうか疑問に思っていました。または、別のグラフ ライブラリの推奨事項はありますか?

アップデート：

基本的に、下のスクリーンショットに示すグラフを作成したかったのです。

以下は、dagre-d3 を使用してグラフを作成するために現在使用しているコードです。

HTML スニペット:

JS スニペット:

json モデルから入力を受け取るグラフを生成したいと考えています。dagre-d3.js を使用しています。ノードを生成でき、ノードを静的に接続することもできます。メソッド graph.addEdge(null,"A","B") は、2 つのノードを接続します。しかし、エッジを動的に作成したい。そのような方法でグラフを生成する方法はありますか?

場合によっては、グラフをリロードしてグラフを再描画し、ページを更新せずに (jquery と ajax を使用して) 初期位置とスケールに設定する必要があります。私が使用したのは、https://github.com/cpettitt/dagre-d3のサンプル コード(インタラクティブなものではなく、ガイドに書かれているもの) であり、エッジとノードを動的クエリで読み込みます。

しかし、ノードとエッジをリロードして再度レンダリングすると、$("g.zoom) の位置とスケールが元のままでした。$("g.zoom) の属性「transform」と「scale」属性を編集しようとしました。 zoom") を jQuery で使用しますが、ユーザーがグラフをドラッグまたはズームすると、スケールと位置が元に戻ります。

https://github.com/cpettitt/dagre-d3/issues/17で解決策を試して、svg をリセットしました。

その後はズームは利用できません。

また、次の方法があるかどうかを知りたいです。

1. グラフ全体を表示するための適切なスケールを計算します (非常に大きなグラフを描画する必要がある場合があります)
2. 画像をダブルクリックすると、どんどん大きくなるのではなく、固定サイズにズームされ、再度ダブルクリックすると、グラフ全体を表示できるスケールに戻ります

私は自分自身を理解してくれたことを願っています。:)

グラフ内の既存のノードをクリックすると動的にノードを追加する簡単な Dagre の例を作成しました。ただし、再レンダリングにより、同じレイヤー内で異なる相対的な順序が作成されます。とにかくこの問題の周りにありますか?

フィドルはこちらから入手できます: http://jsfiddle.net/gke2dann/

前もって感謝します。

PS: また、グラフの更新でこれらの派手な d3 トランジションを使用する方法はありますか?

dagreを使って有向グラフを描くことができました。ただし、ノード/エッジをクリックして削除したいと思います。削除には g.delEdge と g.delNode を使用できますが、誰かがノードをクリックしたことを知るにはどうすればよいですか? 以下の私のjavascript dagreコードを見て、何を追加する必要があるか教えてください.(jsonファイルから必要なノードとエッジを読み込んで、データを解析してプロットしています)