D3將現有的SVG字符串（或元素）附加（插入）到DIV

Question

我在這個地方搜索了這個問題的答案，發現了一些我認為可能有用的資源，但最終沒有引導我回答。 這里有幾個......

• 外部SVG
• 嵌入SVG

問題

我想要做的是將現有的SVG元素或字符串附加到頁面上的DIV，然后能夠在其上應用各種D3.js屬性和屬性，以便稍后我可以操作並使用它（例如應用縮放）能力等）。

我之前使用的是jQuery SVG ，其中我做了這個：

var shapesRequest= '"<svg id="shapes" width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg">' +
       '<polygon id="svgSection_Floor" points="222.61,199.75,222.61,295.19,380.62,295.19,380.62,199.75,222.61,199.75,368.46,283.92,233.54,283.92,233.54,209.12,368.46,209.12,368.46,283.92" title="Floor" link="Primary" />' +
       '<text x="302.61" y="289.4705">Floor</text>...and a lot more of the same...</svg>';
$('#svgtmp').append(shapesRequest);
$('#svgtmp #shapes text').attr('fill', 'white').attr('font-size', '9').attr('font-weight', 'bold');
$('#pnlShapes').width(640).height(480).svg().svg('get').add($('#svgtmp #shapes'));

基本上jQuery SVG和我的代碼正在做的是將SVG字符串附加到臨時DIV，操縱SVG中的一些屬性，然后將該SVG添加到頁面上的永久位置。

這正是我想用D3做的事情。 雖然我不確定是否需要首先附加到臨時DIV，因為我可以訪問SVG字符串並且可以將其附加/附加到帶有D3的DOM元素。

我試過的......

var mapSvg = d3.select("#pnlShapes").append("svg").attr("width", svgWidth).attr("height", svgHeight);
d3.xml(shapesRequest, function (xmlData) {
    var svgNode = xmlData.getElementsByTagName("svg")[0];
    mapSvg.node().appendChild(svgNode);
});

但這不是正確的方法，因為我沒有訪問外部API端點來檢索SVG - 我已經將它存儲為字符串。

我也在考慮做這樣的事情

d3.select("#pnlShapes").append('svg').append(shapesRequest).attr("width", svgWidth).attr("height", svgHeight);

但是.append()在使用D3時不用於這種追加。

---

題

使用D3將現有SVG字符串附加到DOM的正確方法是什么（如果有幫助的話，我也使用jQuery）？ 我的最終目標是附加此SVG，然后使用本教程作為我的基礎允許它可縮放。

Answer 1

您可以使用.html將字符串插入DOM節點

d3.select('#svgtmp').append('div').html('<svg...')

沒有<div>可能會有更優雅的方式。