問題タブ [dagre-d3]

setNode では、html も指定できます。幅と高さについて言及した場合、それが長いテキストである場合、それは移動しています。

div に幅を与えようとしましたが、機能していません サンプルFiddle

ノード内に収まるようにテキストを作成するにはどうすればよいですか?

DagreD3は、表示用に D3 に統合された優れたグラフ ネットワーク レイアウトを提供しますが、エッジの矢印は古い Web ブラウザー (IE11 など) では正しく表示されません。矢印マーカーは、IE11 では塗りつぶしの色なしで表示されます。

これは、 IE11 で表示したときにDagreD3 スタイルのデモで見られます。塗りつぶされていない矢印は赤丸で囲まれています。

これは私の最初の投稿です。誰かが私を助けてくれることを願っています...

jsfiddle の例で見ることができるコンテンツは、私が使用しているツールで作成されています。ノードとエッジ (リンク) のすべての定義は、ツールによって生成されます (「VAR STATES = ..」および「g.setEdge」など) (ツールチップはここでは機能しません。無視してください)。

選択「allnodes」（マウスオーバー時）で、現在のノードを選択できました（d3.select（this）ですが、SELECTITで名前として知られているオブジェクトは選択できません）

私が達成したいこと:

1.) ここのような「マウスオーバー」効果: http://cs.brown.edu/people/jcmace/d3/graph.html?id=small.json

「マウスオーバー」メソッドで影響ノード名を選択できます。

-> ここにある dagrejs/graphlib の API ドキュメント: https://github.com/dagrejs/graphlib/wiki/API-Reference

2.) リンク (親ノードと子ノードを含む) を選択するときの「マウスオーバー」効果

jsfiddle: https://jsfiddle.net/kraab/n9mgo74j/32/

前もって感謝します！

そこで、以下のような質問フローチャートを作成したいと思います: 開始するのに最適な場所がわからない... これは有向グラフですか? それらのいくつかは、実際には間隔が空いており、「フロー」には見栄えがよくありません: https://observablehq.com/@d3/force-directed-graph

私が見た最良の例は、非 D3 ライブラリ (yworks) ですが、15,000 ドルかかるようです: これは、私が見た唯一の関連する StackOverflow であり、yworks を参照しているだけです:フロー チャートを作成できますか (ツリー チャートはありません) D3.js の使用 おそらく、この dagre-d3 の例も同様です: http://jsfiddle.net/armyofda12mnkeys/9L50of2c/2/

私が追加したいいくつかのクールなオプションのもの：

*また、そのノードのデータに基づいて特定の状況でいくつかの赤を緑色にするなど、サークルの css を制御できるようにしたいと考えています。

*各エッジ矢印 onHovers イベントも追加したいので、「if(Question1 == A || B)」のような実際のルールを示すツールチップが表示されます

*ノード/エッジをドラッグ可能または「弾む」ようにします (ドラッグすると元の場所に戻ります)。ギミックに聞こえるかもしれませんが、(スマート自動レイアウトのせいで) ルールがぎこちなくなりすぎて、何かをドラッグして、どの矢印がどこを指しているかを確認したい場合に、ユーザーがこの機能を使用することがあります。