javascript - IE11 での DagreD3 エッジの矢印の塗りつぶしを修正

Question

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

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

Answer 1

svg.markerこれを解決する簡単な方法は、要素に塗りつぶしの色を追加する CSS を追加することです。DagreD3 はsvg.marker各エッジに を追加し、 のようなエッジの矢印に要素 ID 命名スキームを使用します#arrowhead123。1 つの CSS 選択ですべての矢印を変更するには、次を追加します。

[id^=arrowhead] {
  fill: black;  /* fills edge arrowheads in IE11 */
}