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

Question

我在这个地方搜索了这个问题的答案，发现了一些我认为可能有用的资源，但最终没有引导我回答。这里有几个......

• External SVG
• Embed SVG

问题

我想要做的是将现有的SVG元素或字符串附加到页面上的DIV，然后能够在其上应用各种D3.js属性和属性，以便稍后我可以操作并使用它（例如适用于缩放能力等。）。

我以前使用的是jQuery SVG，我这样做了：

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);
});

基本上jQuery SVG和我的代码正在做的是将SVG字符串附加到临时DIV，操纵SVG中的某些属性，然后将该SVG添加到页面上的永久位置。

这正是我想用D3做的事情。虽然我不确定是否需要首先附加到临时DIV，因为我可以访问SVG字符串并且可以将其附加/附加到带有D3的DOM元素。

我尝试过的......

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

但这不是正确的方法，因为我没有点击外部API端点来检索SVG - 我已将它存储为字符串。

我也在考虑做这样的事情

.append()

但使用D3时aria-label不会用于此类追加。

问题

使用D3将现有SVG字符串附加到DOM的正确方法是什么（如果有帮助的话，我也使用jQuery）？ 我的最终目标是附加此SVG，然后允许使用this tutorial作为我的基础进行缩放。

Answer 1

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

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

如果没有<div>，可能会有更优雅的方式。