Three actions will be taking place in this example. Stacked bar chart will be created, followed by creating the grouped bar chart and then transitioning between the two type of chart. There will be many interlocking components.Thinking of extending this example to include Histograms of the categories...
The transition itself has not meaning without the starting and the ending. The code has to tell that state.One issue I faced was using the "this.parentNode" with arrow function "=>" doesn't work.
Because the "y" attribute gets set to 0 or undefined value. In the svg the 0 is at the top of the page. When the scales are computing these values, such issues always occur. Especially when you type the code.
D3 library is continuously updated, so the recent ver 7.0 doesnt have this color scheme. In its place, many other other color schemes like schemeSet1, schemePaired, schemeAccent have been introduced. I have chosen the schemeTableau10 for this visualisation.
Debug by opening the Developer tools, and checking the elements.By looking at the elements, the kind of error can be easily understood. If there is no elements at all, then probably you did not include the .data(yourData) command in the selectAll method.