简体   繁体   中英

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

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

以下是 SVG 裁剪工作原理的简短说明: http : //www.svgbasics.com/clipping.html

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM