I’ve gotten this to work in the past, similar to the Stacked-to-Grouped Bar Graph
but am having trouble since using the newer .join(enter, update, exit) style.
The issue seems to be that the transition is not starting from the previous value of an item, set in the enter call.
I’m setting the data accessor to reference a value, not the index.
I’m using .attr("transform", ... ) which is supported by the transition interpolator.
Its this just incompatible with the .join() pattern and I should go back to the old .enter(), .merge() pattern instead?
I’m not sure what you’re trying to do; I’m not sure if you’re confused by selection.join, or by Observable’s reactive cell updates. Are you re-running the randomized data cell and wanting the graphic to update smoothly? In Observable, that’ll cause the entiregraphic cell to re-run, meaning it’ll recreate the whole SVG from scratch, and won’t run your update code. So instead you can have the graphic expose a method that gets called each time data changes.
Take a look at the two examples in the notebook below, and let me know if they help or if I’ve totally missed what you were asking about:
That’s exactly what I was missing. I knew updating the data in another cell would cause the graph to update, but I thought the graph would be smart enough to diff the old data with the new, and not redo the whole thing from scratch.
This makes a lot of sense. Expose the update function, so that cell never gets re-run, and call the update in another cell that does any time data changes.