Adding a method to stack transitions in objects with several parts

src/transition/index.js

@@ -12,6 +12,7 @@ import transition_remove from "./remove.js";
 import transition_select from "./select.js";
 import transition_selectAll from "./selectAll.js";
 import transition_selection from "./selection.js";
+import transition_stackTransition from "./stackTransition.js";
 import transition_style from "./style.js";
 import transition_styleTween from "./styleTween.js";
 import transition_text from "./text.js";
@@ -59,6 +60,7 @@ Transition.prototype = transition.prototype = {
   attr: transition_attr,
   attrTween: transition_attrTween,
   style: transition_style,
+  stackTransition: transition_stackTransition,
   styleTween: transition_styleTween,
   text: transition_text,
   textTween: transition_textTween,

src/transition/stackTransition.js

@@ -0,0 +1,19 @@
+export default function stackTransition(data) {
+  const total = d3.sum(data)
+  const scales = d3.stack()
+    .keys([...data.keys()])
+    ([data])
+    .map(([[start, end]]) => d3.scaleLinear([start/total, end/total], [0, 1]))
+
+  return function (element) {
+    const ease = element.ease()
+    element.delay(element.delay())
+      .duration(element.duration())
+      .easeVarying((_, i, slices) => t => {
+        let variation = scales[i](ease(t))
+        if (variation <= 0 && i > 0) return 0
+        if (variation > 1 && i < slices.length - 1) return 1
+        return variation
+      })
+  }
+}