d3 error about DOM

Question

I'm trying to update a bar chart using transitions to change the height and order of each bar. I need to bind the new data but I keep getting an error and I'm not sure what it is referring to...can someone please explain?

My code is:

var bars = d3.selectAll("rect")
.data(csUpdatedData, function(d) { return d.area_title; });

The error is:

d3.js:1009 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

I just want an explanation of what the error is so that I can try to fix my error.

Answer 1

I guess, one way to solve this is actually first selecting the svg and then selecting the bars in it.

for ex =

var svg = d3.select("#barchat")
svg.selectAll(".bar")

Also, when you select data while updating, it is actually going to perform data join operation. bars.enter() will add more bars which are not currently present and bars.exit() will remove the bars which are no more needed. So it is possible that the property you used in return d.area_title; is not the best property to join attributes. Try using other properties in data.