d3.js - how to insert new sibling elements

Question

I have a problem with inserting new siblings to existing elements.

I have this structure

<svg> 
  <g> 
    <path class="data"></path> 
    <path class="data"></path> 
  </g>
</svg>

and want this structure

<svg> 
  <g> 
    <path class="data"></path> 
    <text></text>
    <path class="data"></path> 
    <text></text>
  </g>
</svg>

but if I use the d3.js insert function

d3.select("g").insert("text", "path.data");

i get the following (despite selecting by class name)

<svg> 
  <g> 
    <text></text>
    <path class="data"></path> 
    <path class="data"></path> 
  </g>
</svg>

any ideas?

Answer 1

First of all, it's worth noting that the second argument in the insert function is a before selector. Furthermore, chained operations act on the left hand result.

So you have done

// select all the g elements (only 1)
d3.select("g")
    // For each g, insert a text element before "path.data"
    .insert("text", "path.data");

You want to perform an operation for each child ".data", so you need to select each of the ".data" elements and perform an action for each of them. I'm not entirely sure how d3 expects you to insert an element after a specific child. I find it much easier to use the DOM API to do the element creation and insertion, but using the d3.each function to iterate over a selection.

d3.selectAll("g > .data").each(function () {
    var t = document.createElement('text');
    this.parentNode.insertBefore(t, this.nextSibling);       
});​