d3 append copy of g element on click to separate div - d3.js

Question

I have in-line svg code three rect elements I've copied into my html document from Inkscape. I would like to be able to click any one of these rects and have all three of them appear in a separate div on the right side of the screen, zoomed in. I have enclosed each individual rect in a g element with an ID. I have also enclosed all three rects in a class tag of "section1".
Here's the fiddle: https://jsfiddle.net/hh2ek44m/
I have tried all sorts of combinations like this to append the clicked on g element or group of g elements to the #zoombox div.
d3.selectAll("g")
.on("click", function(d) {
d3.select("#zoombox").append("#section1")
});
I have also experimented with using 'this'.
In my working file (very large), I have many sections of rows that appear too small on the screen to visually inspect, and I would like the user to be able to click to zoom in on a section of rows in a separate space on the screen. I'd like to the original rows to remain unchanged, and for the zoomed in section image area to update when a new section is clicked.
I know I'm asking a lot here, so if you could push me in the right direction at all I'd appreciate it.
I've looked at many examples of on-click behavior such as http://bl.ocks.org/eesur/4e0a69d57d3bfc8a82c2 and http://bl.ocks.org/d3noob/5d621a60e2d1d02086bf. I eventually want my three rows to be on the left side of the page, and the zoomed in image of the three on the left, similar to this beautiful d3 vis, http://bl.ocks.org/syntagmatic/0613ee9324e989a6fb6b. Thanks.

Answer 1

This code has some problems:
d3.selectAll("g").on("click", function(d) {
d3.select("#zoombox").append("#section1")
});
First, since #zoombox is a <div>, you cannot append an SVG element directly to it. You have to append an SVG first:
d3.select("#zoombox").append("svg")
But, even doing that, the next step is not simple: you cannot append an ID to it. So, you could probably append an selection:
var myGroup = d3.select("#section1")
But this will not work as well, because the selection is an array. The logical solution would be using the SVG element itself:
var myGroup = d3.select("#section1").node()
But, again, this will not work!
Solution (out of many): Use the SVG use element:
var myGroup = d3.select(".section1");
var myGroupId = d3.select(myGroup).node().attr("id");//get the ID of the group
myGroup.on("click", function(){
d3.select("#zoombox")
.append("svg")
.append("use")
.attr("xlink:href", "#" + myGroupId);//the ID of the cloned group
});
Here is a demo (I changed your SVG a bit, it was too big for this snippet), click on your group to clone it:
var myGroup = d3.select(".section1");
var myGroupId = d3.select(myGroup).node().attr("id");
myGroup.on("click", function(){
d3.select("#zoombox").append("svg").append("use").attr("xlink:href", "#" + myGroupId);
});
div {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id ="zoombox"></div>
<svg width="100">
<g class = "section1" id="myUniqueID">
<g id="section114r1">
<rect
fill="0000ff"
id="section114r1"
width="3"
height="30"
x="35.0462"
y="58.15918" /></g>
<g id="section114r2"><rect
fill="#0000ff"
id="section114r2"
width="3"
height="30"
x="30.88818"
y="58.159" /></g>
<g id="section114r3">
<rect
fill="#0000ff"
id="section114r3"
width="3"
height="30"
x="26.73694"
y="58.15927" /></g>
<g id="section114r4"><rect
fill="#0000ff"
id="section114r4"
width="3"
height="30"
x="22.56696"
y="58.17471" /></g>
</g>
</svg>