javascript - d3 退出转换 : how to flatten path and then remove

Question

描述:我有一个多折线图，其中包含用于过滤显示的线条的控件，以便线条进入和退出。

期望的效果:我想在线条消失之前将其过渡到 x 轴所在的位置(将其展平为 x 轴宽度的水平线)。

我正在尝试:

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();

发生了什么:

1. 除了第一部分之外，所有行都消失。

2. 那一小段线扩展到 x 轴的宽度，并向下平移到它所在的位置。

相反，我希望整条线都进行转换(而不仅仅是第一部分)。我怎样才能实现这个目标？

Answer 1

解决了:使用d3.svg.line()，但将 y 设置为仅返回图表的高度。 (我的代码看起来不同，但我认为这会很接近)

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