在現有的，分離的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謝謝:) –

回答