dagre-d3 Firefox

[ovarte]

chrome show normal,but firefox show not good, only show at right-top of quarter.

[JerryJoyce]

Here is the stack in Firefox.

getCoords
points
enter
attrFunction
default
default
enter
createEdgePaths

getCoords has this line:

  matrix = elem.ownerSVGElement.getScreenCTM()
    .inverse()
    .multiply(elem.getScreenCTM())
    .translate(bbox.width / 2, bbox.height / 2);

Unfortunately, getScreenCTM is undefined and this causes an exception on Firefox.

[goosecoid]

Wrapping your render function in a try catch solves this issue, i.e. firefox doesn't throw an error anymore.

An exampe for React:

function renderGraph() {
  const g = new dagreD3.graphlib.Graph().setGraph(getGraphOptions());
  // do stuff
}

function tryRenderGraph() {
    try {
      this.renderGraph();
    } catch (error) {
      console.log(error);
    }
  }

public componentDidMount() {
    this.tryRenderGraph();
  }

[lutzroeder]

1ef067f and #202

[terrencekuo]

this was my call stack

Uncaught TypeError: elem.ownerSVGElement.getScreenCTM() is null
    getCoords create-edge-paths.js:91
    points create-edge-paths.js:107
    enter create-edge-paths.js:107
    attrFunction attr.js:29
    default each.js:5
    default attr.js:53
    enter create-edge-paths.js:104
    createEdgePaths create-edge-paths.js:14
    fn render.js:32

within create-edge-path, the function looks like this:

function getCoords(elem) {
  var bbox = elem.getBBox();
  var matrix = elem.ownerSVGElement.getScreenCTM()
    .inverse()
    .multiply(elem.getScreenCTM())
    .translate(bbox.width / 2, bbox.height / 2);
  return { x: matrix.e, y: matrix.f };
}

it seems like firefox returns null for getScreenCTM() when the the svg element's width and height are 0.

once the svg element's width + height were set to a non-zero number, I no longer got the error

[ppazos]

Got this exact error when rendering inside a div that has display:none, because it's a collapsed item on the screen. If I remove the display:none, everything works OK.

This is the exact issue I'm experiencing: svgdotjs/svg.js#968

The error is thrown here: function getCoords(elem)

var matrix = elem.ownerSVGElement.getScreenCTM().inverse().multiply(elem.getScreenCTM()).translate(bbox.width / 2, bbox.height / 2);

[kubukoz]

This prevents using mermaid / probably other dagre-d3-based libraries, in the HTML <details> tag.

[Fuzzyma]

fixed in svg.js' master branch