From a2316b1b0755eacd1cb30eae5e48c08a9663c752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Vazquez=20Perez-I=C3=B1igo?= Date: Fri, 8 Nov 2024 14:52:43 +0100 Subject: [PATCH 1/3] Added stackTransition and temp dev file --- src/transition/index.js | 2 + src/transition/stackTransition.js | 28 ++++ stack-transition.html | 228 ++++++++++++++++++++++++++++++ 3 files changed, 258 insertions(+) create mode 100644 src/transition/stackTransition.js create mode 100644 stack-transition.html diff --git a/src/transition/index.js b/src/transition/index.js index 81e7747..f56d7a5 100644 --- a/src/transition/index.js +++ b/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, diff --git a/src/transition/stackTransition.js b/src/transition/stackTransition.js new file mode 100644 index 0000000..3f81f2b --- /dev/null +++ b/src/transition/stackTransition.js @@ -0,0 +1,28 @@ +export default function (arcs) { + return function (element) { + const ease = element.ease() + const duration = element.duration() + const data = [] + arcs.forEach(slice => data.push({ slice, length: slice.data, start: data[data.length - 1]?.end ?? 0, end: (data[data.length - 1]?.end ?? 0) + slice.data })) + const sum = d3.sum(data, d => d.length) + const scales = data.map(({ start, end }) => d3.scaleLinear([start/sum, end/sum], [0, 1])) + element.delay(0) + .duration(duration) + .easeVarying((v, i, slices) => t => { + let variation = scales[i](ease(t)) + if (variation <= 0 && i > 0) { + d3.select(slices[i]).attr('opacity', 0) + } + if (variation > 0) { + d3.select(slices[i]).attr('opacity', 1) + } + if (variation > 1 && i < slices.length - 1) { + variation = 1 + } + return variation + }) + d3.timeout(() => { + element.nodes().forEach(slice => d3.select(slice).attr('opacity', 1)) + }, duration); + } +} \ No newline at end of file diff --git a/stack-transition.html b/stack-transition.html new file mode 100644 index 0000000..e885fd1 --- /dev/null +++ b/stack-transition.html @@ -0,0 +1,228 @@ + + + + + + + + + + \ No newline at end of file From eb97bdd4f60ab660496881a01a2f550050f452c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Vazquez=20Perez-I=C3=B1igo?= Date: Sat, 9 Nov 2024 18:28:20 +0100 Subject: [PATCH 2/3] Stack transition works on barchart --- stack-transition.html | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/stack-transition.html b/stack-transition.html index e885fd1..b097d0a 100644 --- a/stack-transition.html +++ b/stack-transition.html @@ -7,19 +7,21 @@ \ No newline at end of file From 0f7f181085ddc9648cc92755afc585956cff38a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Vazquez=20Perez-I=C3=B1igo?= Date: Sat, 9 Nov 2024 18:31:59 +0100 Subject: [PATCH 3/3] adding area chart call --- stack-transition.html | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/stack-transition.html b/stack-transition.html index b097d0a..9d3e541 100644 --- a/stack-transition.html +++ b/stack-transition.html @@ -109,6 +109,27 @@ singleBar({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height: 100, top: 40, ease: d3[ease], x: width / 4 - 25 }) stackAnimatedBar({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height: 100, ease: d3[ease], y: height * 3 / 4, x: width * 3 / 4 - 25, top: 40 }) }) + easers.forEach(ease => { + const width = 250; + const height = 140; + const radius = 60; + const svg = d3.select('body') + .append('svg') + .attr('width', width) + .attr('height', height); + svg.append('text') + .attr('y', 15) + .attr('x', width / 2) + .attr('text-anchor', 'middle') + .text(ease) + svg.append('rect') + .attr('width', width - 1) + .attr('height', height - 1) + .attr('stroke', 'black') + .attr('fill-opacity', 0) + areaChart({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height: 100, top: 40, ease: d3[ease], x: width / 4 - 25 }) + stackAreaBar({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height: 100, ease: d3[ease], y: height * 3 / 4, x: width * 3 / 4 - 25, top: 40 }) + }) } function singleSlicePie({ svg, width, height, radius, ease, fill, y }) { const data = [54]