Javascript 在现有分离的SVG元素上创建d3选择

我有一个JavaScript组件，它将为其主机提供一个

元素。我想使用d3.js填充SVG元素

如果我让d3.js创建SVG元素并将其添加到

中，那么事情会按预期进行：

var chart = d3.select('body').append('svg');

但是，我已经有了一个SVG元素。我希望我的代码更像：

var svg = document.createElement('svg'),
    chart = d3.select(svg);

后一种方法填充SVG元素（如Chrome开发工具的“元素”面板中所示），但无法正确渲染

我做得不对吗

我不介意d3是否创建SVG元素，只要它不将其附加到DOM并且我可以访问它

---

编辑我创建了一个。您可以在1和2之间切换

进近

变量以查看备选进近。我在Chrome和Firefox（Ubuntu 13.04的最新版本）中都看到了这个问题

---

编辑2我创建了一个屏幕截图，并列显示了工作版本和非工作版本：

---

您可以看到元素树在很大程度上是相同的。但是，在非工作版本（左侧）上，“样式”面板（元素树右侧）缺少一些用户代理规则。我不知道为什么这会有所不同。我认为这是Chrome中的一个bug，但在Firefox中也可以看到相同的行为。

问题在于，您在HTML名称空间中创建的SVG元素被错误地解释了。如果你更换

var svg = document.createElement('svg');

与

---

它很好用。D3通过自动设置名称空间来为您解决这一问题。

这种方法应该有效——当您说它不能正确渲染时，您是什么意思？@Larskothoff，我创建了一个非常棒的名称空间！我不知道

元素位于另一个名称空间中。我以前从未见过它的前缀（

xmlns:svg=…

和

），为什么不需要呢？我会做一些谷歌搜索。再次感谢。啊，太慢了：）。您还可以使用

d3.ns.prefix.svg

提供名称空间URI-请参阅FIDLE:

var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');