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

我在JavaScript中有一个组件，它将为其主机提供一个<svg>元素。我想使用d3.js填充SVG元素。在现有的，分离的SVG元素上创建d3选择

如果我让d3.js创建SVG元素，并将其添加到<body>，那么事情按预期工作：

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

不过，我已经有一个SVG元素。我想我的代码，使其更接近：

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

这后一种方法填充SVG元素（如被看见在Chrome的开发者工具的元素面板），但它不能正常显示。

我该怎么解决这个问题？

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

编辑我创建了一个jsFiddle that reproduces my problem。您可以在1和2之间切换APPROACH变量以查看替代方法。我看器和Firefox这个问题

EDIT 2我已经创建出并排的工作和非工作侧版本的截图（在Ubuntu 13.04最新版本。）：

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

这种方法应该有效 - 当你说它不能正确渲染时，你是什么意思？ –

@LarsKotthoff，我创建了[jsFiddle]（http://jsfiddle.net/drewnoakes/JVrPw/） –

问题是，您正在HTML命名空间中创建SVG元素，导致它被错误地解释。如果更换

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

与

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

它工作正常。 D3通过自动设置名称空间来为您解决这个问题。

2013-07-06 18:32:43

太棒了！我不知道'

呃，太慢了:)。你也可以使用'd3.ns.prefix.svg'来提供命名空间URI - 参见fiddle：http://jsfiddle.net/nrabinowitz/KzwjM/ – nrabinowitz

@nrabinowitz谢谢:) –

回答