d3 exit transition: how to flatten path and then remove

Question

Description : I have a multiple line chart with controls to filter which lines show, so lines are entering and exiting.

Desired effect : I want to transition the line to be exactly where the x-axis is (flattening it to a horizontal line the width of the x axis) before it disappears.

What I'm trying :

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 happens :

1. All of the line disappears besides the first section.

2. That small section of line expands to the width of the x axis, and translates down to where it is.

Instead, I would like the whole line to transform (not just that first section). How can I achieve this?

Answer 1

Figured it out: use d3.svg.line() , but set y to just return the height of the chart. (my code looks different, but I think this would be close)

path.exit().transition().attr('d', function() {
    return d3.svg.line()
        .x(function(d){return d})
        .y(function(d){return chartHeight})(lineData)
})
.remove()