Can I add xmlns:xlink attributes?

[project2501]

I'm trying to do the following to add SVGPan capability to my D3
generated svg.

d3.select("svg").insert("script","g")
.attr("xmlns","http://www.w3.org/2000/svg")
.attr("xmlns:xlink",http://www.w3.org/2000/svg")
.attr("xlink:href","http://localhost/SVGPan.js")

However, the attributes on <script> tag are

<script xmlns="http://www.w3.org/2000/svg" xlink=http://www.w3.org/
2000/svg" ....

Perhaps as a consequence, SVGPan isn't working correctly and should
read:

<script xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://
www.w3.org/2000/svg" ....

Or is something else causing this?

Uncaught TypeError: Object #<HTMLHtmlElement> has no method
'createSVGPoint'

thanks!

[Mike Bostock]

The namespaces are unrelated. You don't need to define the "xmlns" and
"xmlns:xlink" attributes; D3 already knows the "xlink" namespace and
will do the right thing when you say .attr("xlink:href", …). The
namespaces are defined in d3.ns.prefix:

https://github.com/mbostock/d3/blob/master/src/core/ns.js
https://github.com/mbostock/d3/wiki/Namespaces#wiki-prefix

As for the error, I can't say without seeing what's in SVGPan.js. But
it looks like that script assumes it inadvertently assuming the
document's root element is an SVG element, where it will be an HTML
element when the SVG is embedded in a page. My guess is that script
only works with self-contained SVG (e.g., as an <img src="foo.svg">
tag), rather than SVG constructed dynamically via JavaScript.

Mike

[project2501]

Thanks for the tip. I'll have to tinker with it, but it would be nice
to have similar capability
in D3 either way. That is, arbitrary panning, zooming. Is it possible
out of the box?

[project2501]

Ok, I modified the SVGPan.js to do

var root = document.body.getElementsByTagName("svg")[0];

instead of assume the document root was svg and it works now!

[Chris Viau]

My experience is that you have to double the namespace in d3 if you really want it to appear in the DOM:

bars.enter().append('use') .attr('class', 'bar') .attr('xlink:xlink:href', '#bar-reuse');

xlink:href="#bar-reuse"

If not it will not appear, but will still work, at least in my particular test case with svg:use:

bars.enter().append('use') .attr('class', 'bar') .attr('xlink:href', '#bar-reuse');

href="#bar-reuse"

I don't know if it can be related.

Chris

[hugo lpz]

For sake of simplicity, you can do shorter:

bars.enter().append('use') .attr('class', 'bar') .attr(':xlink:href', '#bar-reuse');

it's enough.