Description: My interactive multiple line chart allows users to filter which lines are displayed, resulting in lines entering and exiting dynamically.
Desired effect: I aim to smoothly transition a line to align perfectly with the x-axis before it disappears, essentially flattening it into a horizontal line the width of the x-axis.
What I'm attempting:
var moveBottomLeft = `M0,${this.height - margin.bottom}`;
var lineBottomRight = `L${this.width - margin.right},${this.height-margin.bottom}`;
path.exit().transition().duration(DURATION).attr('d', moveBottomLeft+lineBottomRight).remove();
What is currently happening:
The entire line vanishes except for its initial segment.
This small section of the line then expands to the width of the x-axis and moves downwards.
My goal is for the entire line to transform collectively instead of just the first segment. How can I achieve this?