d3折线图和剪切路径 [英] d3 line chart and clip-path

问题描述

我是d3和svg的新手

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

更正后的代码是此处.

@Scott Cameron建议的站点还显示了一些令人担忧的示例，这有助于我弄清楚如何正确裁剪组和其他元素.

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.

以下SVG示例来自所提及的站点，并稍作修改，可与浏览器和墨迹:

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>

如果遇到困难，我们通常需要正确的工具而不是正确的文档:

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;

不仅要看错的地方.

来这里询问一些问题，您将得到答案.有一天;)

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

这篇关于d3折线图和剪切路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！