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>.