javascript - D3 将现有的 SVG 字符串(或元素)追加(插入)到 DIV

Question

我到处搜索这个问题的答案，找到了一些我认为可能有用的资源，但最终没有找到答案。这里有一些...

• External SVG
• Embed 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，然后使用 this tutorial 使其可缩放作为我的基地。

Answer 1

您可以使用 .html将字符串插入 DOM 节点

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

没有 <div> 可能会有更优雅的方式.