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

我正在尝试使用d3.js和svg呈现甘特图。 该图表分为两部分，一部分（迷你图表）显示完整的甘特图。 其他（主图表）仅显示部分图表

我在迷你图中有一个视图窗口，我可以在迷你图上拖动它。 现在，主图表应该只渲染视图窗口内的部分（主图表作为小图表的缩放版本）

现在我需要呈现主图表中的数据，该图表以“rect”为边界。 如何裁剪主图表区域之外的元素

将另一个svg添加到主svg中可能是一个解决方案。还有别的办法吗

谢谢

您可以使用

示例代码

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数据集={
苹果：[5324528479196972403740245]，
};
可变宽度=460，
高度=300；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.风格（“背景色”、“灰色”）；
append（“clipPath”）//定义剪辑路径
.attr（“id”，“rect clip”）//给clipPath一个id
.append（“rect”）//追加要剪切的形状
.attr（“x”，20）
.attr（“y”，20）
.attr（“宽度”，420）
.attr（“高度”，260）
.attr（“填充”、“ccffff”）；
var chartContainer=svg.append（“rect”）
.attr（“x”，20）
.attr（“y”，20）
.attr（“宽度”，420）
.attr（“高度”，260）
.attr（“填充”、“ccffff”）；
var chartElem1=svg.append（“圆”）
.attr（“cx”，50）
.attr（“cy”，80）
.attr（“r”，40）
.attr（“填充”、“ffccff”）
.attr（“填充不透明度”，0.6）
.attr（“剪辑路径”、“url（#rect clip）”）；
var chartElem2=svg.append（“rect”）
.attr（“x”，10）
.attr（“y”，200）
.attr（“宽度”，100）
.attr（“高度”，20）
.attr（“填充”、“ffccff”）
.attr（“剪辑路径”、“url（#rect clip）”）
正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
保证金：自动；
位置：相对位置；
宽度：960px；
}
您可以使用

示例代码

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数据集={
苹果：[5324528479196972403740245]，
};
可变宽度=460，
高度=300；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.风格（“背景色”、“灰色”）；
append（“clipPath”）//定义剪辑路径
.attr（“id”，“rect clip”）//给clipPath一个id
.append（“rect”）//追加要剪切的形状
.attr（“x”，20）
.attr（“y”，20）
.attr（“宽度”，420）
.attr（“高度”，260）
.attr（“填充”、“ccffff”）；
var chartContainer=svg.append（“rect”）
.attr（“x”，20）
.attr（“y”，20）
.attr（“宽度”，420）
.attr（“高度”，260）
.attr（“填充”、“ccffff”）；
var chartElem1=svg.append（“圆”）
.attr（“cx”，50）
.attr（“cy”，80）
.attr（“r”，40）
.attr（“填充”、“ffccff”）
.attr（“填充不透明度”，0.6）
.attr（“剪辑路径”、“url（#rect clip）”）；
var chartElem2=svg.append（“rect”）
.attr（“x”，10）
.attr（“y”，200）
.attr（“宽度”，100）
.attr（“高度”，20）
.attr（“填充”、“ffccff”）
.attr（“剪辑路径”、“url（#rect clip）”）
正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
保证金：自动；
位置：相对位置；
宽度：960px；
}
你能发布一个工作的提琴吗…你可以用一个剪辑或一个剪辑来裁剪东西。这不是精确的代码，因为我的实际代码非常大，是一个大型项目的一部分，但是这个提琴显示了我想要实现的目标，如果那些元素在矩形区域之外，我希望所有的图表元素都被裁剪。你试过d3.brush吗？你可以发布一个工作的提琴吗？你可以用一个剪辑或一个剪辑来裁剪东西。这不是精确的代码，因为我的实际代码非常大，是一个大型项目的一部分，但是这个提琴显示了我想要实现的目标，如果那些元素在矩形区域之外，我希望所有的图表元素都被裁剪。你试过d3.brush吗？