d3.js – how to insert new sibling elements

by

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);       
});​

Leave a Comment