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

会发生什么：

除第一部分外，所有行都消失了。
该线的一小部分扩展到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()

d3退出转换：如何展平路径然后删除

1 个答案: