The problem is related to your nested data structure. Your new data is getting succesfully joined to your "slice" <g>
elements, but not to your "inner" and "outer" <g>
elements and the <path>
elements themselves.
The fix is simple but non-intuitive. Replace allSlices.selectAll(".inner").selectAll("path")
with allSlices.select(".inner").select("path")
and the same for the "outer" group.
With selection.select()
the selected element inherits the updated data from the parent, versus in .selectAll()
any existing data is not changed. This important difference isn't very often emphasized in tutorials. However, it makes sense -- if you are selecting many elements with selectAll
they should each have their own data, it would not make sense to have them all receive the same value from the parent.