Error in Microsoft Edge: Unable to get property 'matrix' of undefined or null reference

[GrahamHannington]

d3-graphviz works for me in latest Chrome and Firefox on Windows 10, but Edge (version 40.15063.0.0) fails to render the DOT and displays the following error:

SCRIPT5007: Unable to get property 'matrix' of undefined or null reference
d3-graphviz.min.js (1,1398)

(It occurred to me to look for an existing related issue for Viz.js, but I couldn't find one, so I thought I'd begin by reporting it here.)

Software versions:

<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.0.1/build/d3-graphviz.min.js"></script>

[magjac]

I don't have access to Edge. Please try the unminifed version https://unpkg.com/d3-graphviz@1.0.1/build/d3-graphviz.js and post the backtrace here. Does it occur for any DOT? If not, please supply a DOT that triggers the problem. I suspect the problem occurs here.

Thanks for submitting this issue. If you are using this library, don't forget to "Watch" it to stay tuned for updates or even "Star" it if you like it.

You can also use Stack Overflow tags d3.js & graphviz to ask for help. Although I make an effort to assist everyone that asks, I am not always available to provide help promptly or directly.

[GrahamHannington]

I suspect the problem occurs here

Yes, you nailed it precisely. In d3-graphviz.js (v1.1.0; thanks again for the new build):

function getTranslation(g) {
    var transform = g.node().transform;
    if  (transform && transform.baseVal.length != 0) {
        var matrix = transform.baseVal.consolidate().matrix; // Error occurs here
        return {x: matrix.e, y: matrix.f};
    } else {
        return {x: 0, y: 0};
    }
}

Call stack from Edge (using the unminified https://unpkg.com/d3-graphviz@1.1.0/build/d3-graphviz.js):

[Main Thread]
getTranslation [Line: 48, Col: 11], d3-graphviz.js
extractElementData [Line: 91, Col: 11], d3-graphviz.js
extractData [Line: 692, Col: 11], d3-graphviz.js
layoutDone [Line: 877, Col: 11], d3-graphviz.js
worker.onmessage [Line: 857, Col: 19], d3-graphviz.js
[Worker#1 blob:D100BA7B-9EFE-4398-AF67-CE318627909A (cpattl.html)]

Is this the information you were after? Let me know. I'm a JavaScript noob, but I'm keen to help (and learn).

[GrahamHannington]

Does it occur for any DOT?

It occurs for every DOT I've tried, which is only a handful, so far.

[GrahamHannington]

I'm writing user documentation for a thin UI wrapper I've developed around d3-graphviz.

I want to cite supported browsers.

I'm running Windows 10. I have 4 browsers installed: Edge, IE11, Chrome, and Firefox.

Of these, d3-graphviz "works" in Chrome and Firefox. And frankly, for my purposes, that's good enough.

In particular, I'm totally fine to forget about IE11.

But am I doing d3-graphviz an injustice by writing, in the user documentation for my UI wrapper, "requires Chrome or Firefox"? Are there other browsers I should be citing?

[magjac]

I've only tested with Chrome, Firefox and Safari and since there are issues both with Edge and Safari, I think it is reasonable to require Chrome or Firefox. No injustice in that.

[magjac]

@GrahamHannington: with v1.3.1 there are no known problems with any browser, although I haven't tested with IE.

[GrahamHannington]

Thank you for working on browser support, I sincerely appreciate it. Unfortunately, while d3-graphviz v1.3.1 does not crash in Edge, my DOT files do not render correctly in Edge.

In Chrome 63 on Windows 10 (good):

In Edge 40 on Windows 10 (bad):

I've captured and compared the generated <svg> elements (generated from the same DOT file) from each browser. The SVG in Edge contains some attributes in block capitals that should be in lowercase. For example:

<polygon points="8,-8 8,-1490.07 1156,-1490.07 1156,-8 8,-8" FILL="#ffffff" STROKE="#ffffff" />
<text x="549.7335" y="-1460.4724" FILL="#152935" FONT-FAMILY="IBM Plex Sans" FONT-SIZE="14px" FONT-WEIGHT="bold" TEXT-ANCHOR="start">IYK2Z1V1</text>

If, using the Edge developer tools and an external text editor, I edit the generated "in-DOM" SVG and change those attributes to lowercase, then the graph appears correctly.

DOT file:

cpattl-dot.txt

[GrahamHannington]

I think the problem might be mine; because I am using a backlevel Windows 10 build. So I'm still exposed to this bug (if this is the cause):

Edge's DOMParser.parseFromString converts known SVG attributes to all upper-case

I don't know what the status "FIXED, NOT YET FLIGHTED" means. Charles M. from the Edge Teams reports "Available in builds 16251+". To my knowledge, the latest available Windows 10 OS build is 16299.192 (Version 1709).

I'm running Windows 10, Version 1703 (OS Build 15063.483), which is deliberately backlevel. My employer's Windows sysadmin is cautious about rolling out updates; I have had reason to be grateful for this caution in the past.

[magjac]

You can try to generate a graph with http://viz-js.com/. Then we'll know if it's d3-graphviz or not.

I don't have regular access to Windows 10, so I can't try it myself at the moment.

[GrahamHannington]

The DOT file I supplied renders correctly on that site.

Thanks for the link. I was aware of http://www.webgraphviz.com/, but not that (nicer) site (I know d3-graphviz relies on Viz.js).

[magjac]

Thanks @GrahamHannington. d3-graphviz does something very similar to DOMParser.parseFromString, so it is probably the bug you referenced above.

[GrahamHannington]

Suppose I've already converted some DOT files to SVG files.

Next, I want to display those SVG files using the same web UI that I've developed for d3-graphviz. Say, as a stopgap for Edge support (on my computer).

I want to take advantage of the nice UI I already have, using panning and zooming provided by d3-graphviz. I just don't need d3-graphviz to render the DOT; it's already rendered to SVG.

Is there an easy way to bypass the DOT rendering, and just inject pre-generated SVG, in such a way that d3-graphviz will still pan'n'zoom as if it had rendered the SVG itself from the DOT?

Here's some prototype JavaScript, which loads the SVG into the container div:

var parser = new DOMParser()
var svg = parser.parseFromString(data, "image/svg+xml")
document.getElementById(exports.graphContainerHTMLElementID).innerHTML = svg.documentElement.outerHTML
graphviz = d3.select("#" + exports.graphContainerHTMLElementID).graphviz()
renderDotEnd()

(where data contains the text of the fetched SVG file)

The resulting SVG displays okay, but there's no panning and zooming. How do I make d3-graphviz "like" that SVG?

(I could develop a completely separate UI to display, pan'n'zoom this SVG that does not rely on Viz.js, d3, or d3-graphviz, but I'd prefer not to do that; plus, I don't have time.)

[magjac]

@GrahamHannington: Based on the bug description, I think it's the extraction of data from the SVG that is the problem in that old Edge version. Since almost everything in d3-graphviz is based on that data, I think it would be cumbersome to avoid it, even if just panning and zooming is wanted.

I think it would be much easier for you to attach the d3-zoom behavior directly without the use of d3-graphviz. You could probably just copy the code from https://github.com/magjac/d3-graphviz/blob/master/src/zoom.js and remove the stuff related to the data that you won't need.

Sorry.