d3 линейный график и клип-путь

Question

Я новичок в d3 и SVG

Может кто-нибудь объяснить мне, как технически работает перетаскивание/кастрюлю с клипом элементом пути

http://jsfiddle.net/MKmHM/1/

var zoom = d3.behavior.zoom() 
    .x(x) 
    .on("zoom", draw); 

svg.append("clipPath") 
    .append("rect") 
    .attr("id", "clip") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("fill", "blue"); 

svg.append("rect") 
    .attr("class", "pane") 
    .attr("width", width) 
    .attr("height", height) 
    .call(zoom); 

svg.append("path") 
    .attr("class", "line") 
    .attr("clip-path", "url(#clip)"); 

прямоугольник CSS

rect.pane { 
    cursor: move; 
    fill: none; 
    pointer-events: all; 
} 

Answer 1

Вот краткое описание того, как работает SVG отсечение: http://www.svgbasics.com/clipping.html.