How can I specify a custom XML/SVG namespace with D3.js?

Question

I am trying to define my own namespace inside a SVG so I can use my own tags and attributes. If I understand correctly, the SVG should look like this:

<svg xmlns:myns="http://www.example.com/whatever/">
  <g myns:mycustomattr="123">
    ... 

I am adding root SVG element through D3, but adding a namespace to it with attr fails:

var svg = d3.select("#container")
  .append("svg")
    .attr('xmlns:myns', 'http://www.example.com/whatever/') 

The code above results in: NamespaceError: An attempt was made to create or change an object in a way which is incorrect with regard to namespaces

What would be the correct way to add namespace to SVG using D3.js?

Answer 1

You just set d3.ns.prefix

d3.ns.prefix.myns = "http://www.example.com/whatever/";

Then use it:

var svg = d3.select("#container")
  .append("svg")
    .attr('myns:someAttribute', 'some value');