d3折线图和剪辑路径

Question

我是d3和svg的新手

有人可以解释一下我在技术上如何使用clip-path元素

来处理拖动/平移

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

rect css

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

Answer 1

以下是SVG剪辑如何工作的简短描述：http://www.svgbasics.com/clipping.html。