d3 line chart and clip-path

问题

I'm new to d3 and svg

Could someone explain me how technically is working the drag/pan with the clip-path element

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;
}

回答1:

The Devil is in the Details

I hope you figured out the right answer by your self already, there is a slight delay between the question and my answed ;)

Your solution works except that the rectangle is sligthly misplaced and two lines of code needs to be replaced:

svg.append("clipPath")
    .attr("id", "clip")  // <-- we need to use the ID of clipPath
    .append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "blue");

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

The corrected code is here.

How to use clipping

The site suggested by @Scott Cameron shows also some woring samples, thay helped me to figure out how to apply clipping on groups and other elements correctly.

The solution to apply the clipping on groups has the benefit that we don't have to apply on each grid lines and data lines separatly.

The following SVG sample is form the mentioned site, slightly modified, works with browser and inkscape:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   viewBox="0 0 1100 400" version="1.1">
    <defs>
        <rect id="r1" width="150" height="150" stroke="black" stroke-width="1"/>
        <circle id="r2" cx="100" cy="100" r="100" stroke="black" stroke-width="1"/>
        <circle id="r3" cx="100" cy="100" r="100" stroke="black" stroke-width="1"/>
        <radialGradient id="g1" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
            <stop stop-color="black" offset="0%"/>
            <stop stop-color="teal" offset="50%"/>
            <stop stop-color="white" offset="100%"/>
        </radialGradient>
        <clipPath id="clip1">
            <path d="M 0 0 L 550 200 L 1100 0"/>
        </clipPath>
    </defs>
    <g clip-path="url(#clip1)">
        <use x="250" y="0" xlink:href="#r1" fill="url(#g1)"/>
        <use x="350" y="150" xlink:href="#r2" fill="url(#g1)"/>
        <use x="580" y="50" xlink:href="#r3" fill="url(#g1)"/>
    </g>
</svg>

We are not alone

If we get stuck at some point, we often need the right tool instead of the right document:

• find a solution to check what you're up to is what's actually happening;

• divide your task into smaller parts and check them separately;

• do not just look at the spot where you expect the mistake.

• and come HERE and ask some question, you will get an answer. Someday ;)

回答2:

Here's a short description of how SVG clipping works: http://www.svgbasics.com/clipping.html.

来源：https://stackoverflow.com/questions/18125261/d3-line-chart-and-clip-path