Fix DagreD3 edge arrowhead fill in IE11

Question

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.

Answer 1

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 */
}