I have been following the amazing tutorial on to learn more about the join paradigm.
Everything was working fine until I tried to make each node more complex by adding a group with text inside. The main group gets updated, but the child one does not.
Snippet of Code
Check out https://codepen.io/daohodac/pen/JjdJWEV (letters1 is already loaded. Click on update to load the letters2 dataset)
const letters1 = "abcdefghijkl".split("").map((l,i) => ({l:l, color:'green', shift:0}));
const letters2 = "abcdefghijklmnopqrstuvwxyz".split("").map((l,i) => ({l:l, color:'red', shift:i*5}));
In this code snippet, the data gets updated correctly on the root node (<g> shifts according to the new value of shift), but the color of the inner text remains the same for the preloaded letters. The data is properly bound to the <g> element. How can I instruct d3 to also apply it to the <text> child element?