D3 append (insert) existing SVG string (or element) to a DIV

Question

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

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

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

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.

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.

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.

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.

---

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 tutorial as my base.

Solution

You can use .html to insert a string into a DOM node

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

There may be an even more elegant way without the <div>.

Comments

[Cool Blue]

If your using d3, you don't need to append html as a text string. Just use selection.append() and/or selection.insert() to build the svg structure you need. Stick to the idiom at it will work.

[james]

Thanks. I ended up just using jQuery to append the SVG string to the DOM (same idea as you had). $('#pnlShapes').append(shapesRequest); from there I can manipulate it with D3 by selecting it like you did above.

[gsanta]

It does not seem to work on IE, do you have any solution for that?

[mattti]

This is not the correct answer. He asked for append or insert method, not just replacing the whole html. What if there is already some content in the div? This is what you are looking for: gist.github.com/biovisualize/373c6216b5634327099a

[Stefano]

I tried but the result is that it stamped [object SVGSVGElement]. I created an SVG with d3 and I want to append another SVG string.