問題タブ [dagre]

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

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)」のような実際のルールを示すツールチップが表示されます

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

dagre を使用してパスを作成すると、ノード全体が 1 つの位置に蓄積されます。ノードの位置属性を使用して個別に位置を設定する代わりに、ノードのデフォルト位置を設定するにはどうすればよいですか (React のない Cytoscape js は正常に動作します)。

期待される結果：

現在の結果: