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>

我們並不孤單

如果我們在某個時候卡住了，我們通常需要正確的工具而不是正確的文檔：

• 找到一個解決方案來檢查你在做什么是實際發生的事情；

• 將您的任務分成更小的部分並分別檢查；

• 不要只看你預計會出錯的地方。

• 來這里問一些問題，你會得到答案。 總有一天 ;)

Answer 2

以下是 SVG 裁剪工作原理的簡短說明： http : //www.svgbasics.com/clipping.html 。