Changes in namespace handling breaks scripts in SVG

[klpn]

The changes in namespace handling in this commit breaks the functionality of SVGs with embedded Javascript like this one. The script is supposed to dynamically create tooltips showing information when the mouse is moved over a datapoint. It works if I use a version of D3 before the commit was merged, or if the SVG and Javascript code are embedded into a HTML document. Apparently, the namespace-aware createElementNS, rather than createElement, has to be used in order for the script to work.

[mbostock]

You can fix the code by specifying an SVG namespace when appending elements. For example, replace:

selection.append("g");

With:

selection.append("svg:g");

If you specify an explicit namespace, then createElementNS is always used. If you do not specify an explicit namespace, then createElementNS is used if the element to be appended has a different namespace than the document; otherwise, createElement is used.

Here, because you are appending an SVG element in an SVG document, createElement is used rather than createElementNS.

Unfortunately, createElement isn’t very reasonable in non-HTML documents: it creates elements with a null namespace. In HTML documents—and XUL, and perhaps other namespaces to be determined—it creates elements in the namespace of the document (e.g., XHTML).

We could make the logic HTML-specific:

var document = this.ownerDocument,
    documentNamespace = document.documentElement.namespaceURI,
    namespace = this.namespaceURI;
return namespace && namespace !== documentNamespace && documentNamespace === "http://www.w3.org/1999/xhtml"
    ? document.createElementNS(namespace, name)
    : document.createElement(name);

But, that would mean using createElementNS to create XUL elements inside an XUL document, when it could reasonable use createElement. Though I’m unsure if there’s a difference in behavior in the XUL case—at least in HTML there is, hence #2722.

I’m somewhat inclined to keep the namespace resolution logic as simple as possible… That means if you want to create an SVG element in an SVG document, you would need to specify the SVG namespace explicitly. But if there were a way to test whether document.createElement created an element of the same namespace as the document element (other than hard-coding the test for HTML), that might be reasonable.

[mbostock]

The specification for createElement is HTML-specific, so it seems reasonable to make our logic HTML-specific, too.

[mbostock]

Fixed in 3.5.16.