如何使用D3.js指定自定义XML/SVG命名空间

Question

我正试图在SVG中定义自己的命名空间，以便使用自己的标记和属性。如果我理解正确的话，SVG应该是这样的：

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

我正在通过D3添加根SVG元素，但使用attr向其添加命名空间失败：

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

上面的代码导致：NamespaceError：试图创建或更改对象的方式与命名空间不正确

使用D3.js向SVG添加命名空间的正确方法是什么？

Answer 1

您只需设置d3.ns.prefix

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

然后使用它：

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