svg:如何绘制将在矩形区域外裁剪的图形元素

Question

我正在尝试使用d3.js和svg来呈现甘特图。图表有两个部分，一个(迷你图)显示完整的甘特图。其他(主图表)仅显示图表的一部分。

我在迷你图表中有一个视图窗口，我可以将其拖动到迷你图表上。现在，主图表应该只呈现视图窗口中的部分(主图表作为迷你图表的缩放版本)。

现在，我需要在主图表中呈现数据，该图表的边界是一个"rect“。如何裁剪位于该主图表区域之外的元素？

添加另一个svg作为主svg的内部可能是一种解决方案。还有没有别的办法呢？

谢谢。

Answer 1

您可以使用clipPath。

示例代码

svg.append("clipPath") // define a clip path
  .attr("id", "rect-clip") // give the clipPath an ID
  .append("rect") //Append the shape for clipping
  .attr("x", 20)
  .attr("y", 20)
  .attr("width", 420)
  .attr("height", 260)
  .attr("fill", "#ccffff");

var chartElem1 = svg.append("circle")
  .attr("cx", 50)
  .attr("cy", 80)
  .attr("r", 40)
  .attr("fill", "#ffccff")
  .attr("fill-opacity", 0.6)
  .attr("clip-path", "url(#rect-clip)"); //Set clip-path using id

​

var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
};

var width = 460,
  height = 300;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("background-color", "grey");

svg.append("clipPath") // define a clip path
  .attr("id", "rect-clip") // give the clipPath an ID
  .append("rect") //Append the shape for clipping
  .attr("x", 20)
  .attr("y", 20)
  .attr("width", 420)
  .attr("height", 260)
  .attr("fill", "#ccffff");

var chartContainer = svg.append("rect")
  .attr("x", 20)
  .attr("y", 20)
  .attr("width", 420)
  .attr("height", 260)
  .attr("fill", "#ccffff");

var chartElem1 = svg.append("circle")
  .attr("cx", 50)
  .attr("cy", 80)
  .attr("r", 40)
  .attr("fill", "#ffccff")
  .attr("fill-opacity", 0.6)
  .attr("clip-path", "url(#rect-clip)");

var chartElem2 = svg.append("rect")
  .attr("x", 10)
  .attr("y", 200)
  .attr("width", 100)
  .attr("height", 20)
  .attr("fill", "#ffccff")
  .attr("clip-path", "url(#rect-clip)");

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

​