Accepted answer

Using a key function when binding the data is a very good practice in D3, which ensures object constancy. So, contrary to the suggestion in the accepted other answer, you should not remove it.

Instead of removing it, just fix the key function. The problem right now is that since the keys are...

["Team 1 CC", "Team 2 CC", "Team 3 CC"]

... for the selected dataset, this...

d.key.split(' ')[0]

.. will return TEAM for every group, and the keys obviously cannot be the same.

So, just do...

d.key.split(' ')[0] + d.key.split(' ')[1]

Or even just...

d.key.slice(0, -3)

... which will return: TEAM 1, TEAM 2 and TEAM 3.

Here is your updated Plunker:


It looks like your mistake in this code:

let barGroups = g.selectAll("g.layer")
  .data(stacking, d=>d.key.split(' ')[0]);

You pass the second argument to .data method. According to docs:[data[, key]])

... A key function may be specified to control which datum is assigned to which element, replacing the default join-by-index, by computing a string identifier for each datum and element.

If you remove it your visualization will work properly, checkmy fork of your plnkr.

Related Query

More Query from same tag