0

DagreD3 offers excellent graph network layout with integration to D3 for display, but the edge arrowheads don't display properly in old web browsers (e.g. IE11). The arrowhead markers are displayed in IE11 without a fill color.

This is seen with the DagreD3 styles demo when viewed with IE11. Arrowheads lacking fill are circled in red.

Arrowheads lack fill color

AlexM
  • 1,020
  • 2
  • 17
  • 35

1 Answers1

0

A quick way to resolve this is adding CSS that adds a fill color to the svg.marker elements. DagreD3 adds an svg.marker for each edge, and uses an element ID naming scheme for the edge arrowheads like #arrowhead123. To modify all of the arrowheads with one CSS selection, add:

[id^=arrowhead] {
  fill: black;  /* fills edge arrowheads in IE11 */
}
AlexM
  • 1,020
  • 2
  • 17
  • 35
  • You might end up in some more trouble with IE. Try looking up my answer here: https://stackoverflow.com/questions/20528740/dagre-d3-ie-workaround-for-svg-foreignobject-element#41461241 – MadsVJ Jul 28 '18 at 14:55