Updating a grouped bar chart (transition or removal of groups)

[Benedikt Brink]

I am trying to implement an extended version of the Grouped Bar Chart (http://bl.ocks.org/mbostock/3887051). Everything works fine, except updating the plot.

Normally I would just use selections, and use enter() to append new nodes, transition() to update existing nodes and exit() to remove the rest. Here is a working example of my plot (without groups), which shows the desired when you click on "sort by name" or "sort by value": http://jsfiddle.net/w2q0kjgd/1/

I used exactly the same concept and applied it to the groups, however it only appends new groups everytime the draw function is called: http://jsfiddle.net/o3fpaz2d/6/

Am I doing something wrong or is this a bug?

[nick]

your bars selector:

groups.selectAll(".bar")

is looking for things classed "bar", but you aren't ever giving the rects the bar class.

When you add new bars, give them the bar class.

Here's a simpler version of your class assigner:

bars.attr("class", function (d) {
  return ["bar", "bar" + d.type, d.size < 0 ? "negative" : "positive"].join(" ");
});

Here are those two changes:
http://jsfiddle.net/8u3f5pum/

Hooray!

[Benedikt Brink]

Thanks, but the coloring is not the issue, your fiddle is not working for me either. To simplify this, I removed the colors, so all bars are just blue and classed as "bar": http://jsfiddle.net/8u3f5pum/2/

[Ben]

I am still trying to figure this out. I updated the fiddles, so that there should be no other differences than the grouping.

Here is the working example without groups: http://jsfiddle.net/w2q0kjgd/2/

This is the not working example with groups: http://jsfiddle.net/o3fpaz2d/9/