title: Problems when using the insert() function in d3 java library when trying to insert SVG elements before another
body: <p>I have problems using the <a href="https://github.com/mbostock/d3/wiki/Selections#wiki-insert" rel="nofollow noreferrer">insert() function</a> of the d3 visualization library. Better to say I do not understand how to use the "before selector". I red the examples <a href="https://groups.google.com/forum/?fromgroups=#!topic/d3-js/JD7k8pz3D-M" rel="nofollow noreferrer">here</a> and <a href="https://stackoverflow.com/questions/13029571/d3-js-how-to-insert-new-sibling-elements">here</a>, but this dod not help.</p>
  
  <p>I create an svg element and append an  element to it. Then I append foreignObject-element to the group and would like afterward insert an rectangle before the foreignObject-element.</p>
  
  <p>Here is my code</p>
  
  <pre><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);
  </code></pre>
  
  <p>Here is a (non)working <a href="http://jsfiddle.net/GCTuD/" rel="nofollow noreferrer">Jsfidle example </a></p>