javascript - Problems when using the insert() function in d3 java library when trying to insert SVG elements before another -

i have problems using insert() function of d3 visualization library. better not understand how use "before selector". red examples here , here, dod not help.

i create svg element , append element it. append foreignobject-element group , afterward insert rectangle before foreignobject-element.

here code

var body = d3.select("body");  var svg = body.append("svg")     .attr("width", '100%')     .attr("height", '100%');  var group = svg.append("svg:g");  var html = group.append("foreignobject")     .attr("x", 50)     .attr("y", 25)     .attr("width", 200)     .attr("height", 100)     .append("xhtml:div")     .style("font", "14px 'helvetica neue'")     .html("lorem ipsum dolor sit amet, consectetur adipiscing elit. donec eu enim quam.");  var rect1 = group.insert("svg:rect", html)     .attr("rx", 6)     .attr("ry", 6)     .attr("x", 5/2)     .attr("y", 5/2)     .attr("id", "rect")     .attr("width", 250)     .attr("height", 120)     .style("fill", 'white')     .style("stroke", d3.scale.category20c())     .style('stroke-width', 5); 

here (non)working jsfidle example

edit: try passing id before select, shown here: http://jsfiddle.net/gctud/3/

var rect1 = group.insert("svg:rect", "#foreign_object") 

you cannot select element tag name, constants (such id), specified in docs:

the name , before selector must specified constants, though in future might allow inserting of existing elements or function generate name or selector dynamically.