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.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 建议的网站还显示了一些工作示例，它们帮助我弄清楚如何正确地将剪辑应用于组和其他元素。

在组上应用剪切的解决方案的好处是我们不必分别在每个网格线和数据线上应用剪切。

以下 SVG 示例来自上述网站，稍作修改，适用于浏览器和 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>

我们并不孤单

如果我们在某个时刻陷入困境，我们通常需要正确的工具而不是正确的文档：

• 找到一个解决方案来检查你所做的事情是否是实际发生的事情；

• 将你的任务分成更小的部分并分别检查；

• 不要只看你预计会出现错误的地方。

• 来这里问一些问题，你会得到答案。有一天;)