javascript - D3.js how to embed selection into a new element -

i wondering if there native function in d3.js create new element around (embedding) selection. instance have structure :

<path ...></path> <path ...></path> <path ...></path> <path ...></path> <path ...></path> 

and want :

<path ...></path> <path ...></path> <g>     <path ...></path> </g> <path ...></path> <path ...></path> 

so create new element around selection.

i think can : selection, detach it, create element , insert selection new element. sorry if question has been posted already, struggle explain in english.

any suggestion appreciate

although in d3 there no such thing jquery's .wrap(), easy dom manipulation. need use 3 of d3's methods:

1. selection.insert(name[, before]) insert wrapping element @ desired position in dom tree. return newly inserted element.

2. selection.remove() remove element wrapped dom. function return removed element d3 selection.

3. selection.append() append removed element (2.) wrapping element (1.). in case need pass dom node .append() whereas selection.remove() returns d3 selection. therefore, need node via call selection.node().

chained end following:

d3.select("svg")      .insert("g", "#c")          // insert wrapper before <path id="c">      .append(function() {        // append wrapper element...      	return d3.select("#b")                	   .remove()    // ...which removed.              	   .node();     // use node instead of d3's selection  	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>    <svg width="100" height="100">      <path id="a" d="m1 1"></path>      <path id="b" d="m1 1"></path>      <path id="c" d="m1 1"></path>  </svg>

this produce following result:

<svg width="100" height="100">     <path id="a" d="m1 1"></path>     <g>         <path id="b" d="m1 1"></path>     </g>     <path id="c" d="m1 1"></path> </svg>