刷牙时避免切轴

Question

好的我在D3有这个刷码

    function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.select(".line").attr("d", line);
  focus.select(".x.axis").call(xAxis);}

http://plnkr.co/edit/DtvCerKdeDs9jklZo5QY?p=preview

基于这个刷机例子

http://bl.ocks.org/mbostock/1667367

我画了一条线，而不是一个区域。我的问题是刷的时候想避免y轴被蓝线截断。有人知道怎么解决吗？

非常感谢

Answer 1

您错过了将剪辑路径应用于线路路径：

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1 px;
  stroke-opacity: 0.8;  
  clip-path: url(#clip); //<-- Apply clip-path to path
}

已更新 example。

刷牙时避免切轴

Avoid axis being cut when brushing

javascript

brush

d3.js