how to get rid of overlap line graph in d3js

Question

can you please help me to remove the overlap line on my line graph. This is a dynamic graph. So whenever I want to change the scale of my graph to a bigger domain, the whole path should be there. and when i change again the scale to smaller one, I dont want to see the line graph or just see the lines that covers the range of my scale. thanks.

var data = [
    {"x":1, "y":1},
    ....
    ....
    ];

var line = d3.svg.line()
    .x(function(d) { return xScale(d.x); })
    .y(function(d) { return yScale(d.y); });


var path = svg.append("path")
    .data([data])
    .attr("d", line)
    .attr("stroke", "black");

click the link for sample output.

from: CLICK HERE FOR SAMPLE IMAGE

to: CLICK HERE FOR SAMPLE OUTPUT IMAGE

Answer 1

As mentioned in the comments, use clip path. Here are a few examples that will help :

http://www.d3noob.org/2015/07/clipped-paths-in-d3js-aka-clippath.html

Svg clip-path within rectangle does not work

http://bl.ocks.org/couchand/6399221

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath