javascript D3 将现有的 SVG 字符串（或元素）附加（插入）到 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29855452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3 append (insert) existing SVG string (or element) to a DIV
提问by james
I've searched all over the place for an answer to this question and found some resources that I thought may be useful, but ultimately did not lead me to an answer. Here are a few...
我到处搜索这个问题的答案，找到了一些我认为可能有用的资源，但最终没有找到答案。这里有一些...
The issue
问题
What I am trying to do it append an existing SVG element or string to a DIV on the page and then be able to apply various D3.js properties and attributes on it, so I can later manipulate and work with it (such as apply zooming abilities, etc.).
我想要做的是将现有的 SVG 元素或字符串附加到页面上的 DIV，然后能够在其上应用各种 D3.js 属性和属性，以便我以后可以操作和使用它（例如应用缩放能力等）。
I was previously using jQuery SVGin which I did this:
我以前使用过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'));
So essentially what jQuery SVG and my code is doing is appending the SVG string to a temporary DIV, manipulating some properties within the SVG, then adding that SVG to its permanent location on the page.
所以基本上 jQuery SVG 和我的代码正在做的是将 SVG 字符串附加到临时 DIV，操作 SVG 中的一些属性，然后将该 SVG 添加到其在页面上的永久位置。
This is exactly what I am trying to do with D3. Although I am not sure if I need to append to a temporary DIV first, as I have access to the SVG string and could just append/attach that to a DOM element with D3.
这正是我想要用 D3 做的事情。尽管我不确定是否需要先附加到临时 DIV，因为我可以访问 SVG 字符串，并且可以使用 D3 将其附加/附加到 DOM 元素。
What I've tried...
我试过的...
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);
});
But this isn't the correct approach, as I am not hitting an external API endpoint to retrieve the SVG - I already have it stored as a string.
但这不是正确的方法，因为我没有访问外部 API 端点来检索 SVG - 我已经将它存储为字符串。
I was also looking at doing something like this
我也在考虑做这样的事情
d3.select("#pnlShapes").append('svg').append(shapesRequest).attr("width", svgWidth).attr("height", svgHeight);
but .append()when using D3 isn't used for this kind of appending.
但是.append()当使用 D3 时不用于这种附加。
Question
问题
What is the proper way to append an existing SVG string to the DOM using D3 (also I'm using jQuery if that helps)? My ultimate goal is to append this SVG and then allow it to be zoomable using this tutorialas my base.
使用 D3 将现有 SVG 字符串附加到 DOM 的正确方法是什么（如果有帮助，我也使用 jQuery）？我的最终目标是附加这个 SVG，然后允许它使用本教程作为我的基础进行缩放。
回答by ???
You can use .htmlto insert a string into a DOM node
您可以使用.html将字符串插入到 DOM 节点中
d3.select('#svgtmp').append('div').html('<svg...')
There may be an even more elegant way without the <div>.
如果没有<div>.
