D3将现有的SVG字符串（或元素）附加（插入）到DIV [英] D3 append (insert) existing SVG string (or element) to a DIV
问题描述
我搜寻过这个地方寻找这个问题的答案，并找到一些我认为可能有用的资源，但最终并没有让我得到答案。以下是一些...
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...
- External SVG
- Embed SVG
我试图做一个现有的SVG元素或字符串附加到页面上的DIV，然后能够应用各种D3.js属性和属性，所以我可以以后操作
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.).
我以前使用过 jQuery SVG 其中我这样做：
I was previously using jQuery SVG in which I did this:
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添加到页面上的永久位置。
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.
这正是我想用D3做的。虽然我不知道我是否需要先附加到一个临时DIV，因为我可以访问SVG字符串，并可以只是追加/附加到一个DOM元素D3。
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.
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 - 我已经把它存储为一个字符串。
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.
我也在寻找这样的东西
d3.select("#pnlShapes").append('svg').append(shapesRequest).attr("width", svgWidth).attr("height", svgHeight);
但 .append（）不用于此类附加。
使用D3将现有SVG字符串附加到DOM的正确方法是什么（如果有帮助，我还使用jQuery）？
我的最终目标是附加此SVG，然后允许使用本教程作为我的基础。
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 tutorial as my base.
推荐答案
您可以使用 .html 一个字符串转换为DOM节点
You can use .html to insert a string into a DOM node
d3.select('#svgtmp').append('div').html('<svg...')
$ c>< div> 。
There may be an even more elegant way without the <div>.
这篇关于D3将现有的SVG字符串（或元素）附加（插入）到DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
