Javascript 使用d3.drag时，剪辑路径随一组元素一起移动

我正在尝试在剪裁的路径上拖动一组形状。这是第一次，它工作得很好，但当我开始拖动时，剪辑就根本不起作用了

这是我的工作代码

var svg=d3.选择（“svg”）；
//画圈
append（“clipPath”）//定义剪辑路径
.attr（“id”，“clip”）//给clipPath一个id
.append（“圆”）//将其形状设置为椭圆
.attr（“cx”，100）//定位x中心
.attr（“cy”，80）//定位y中心
.attr（“r”，80）//设置x半径
.attr（“填充”、“红色”）
var g=svg.append（“g”）
.datum（{x:0，y:0}）
.attr（“transform”，函数（d）{return'translate（'+d.x+'+d.y+'）；}）
.attr（“剪辑路径”、“url（#剪辑）”）
.call（d3.drag（）
.开启（“启动”，功能（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
})
.开启（“拖动”，功能（d）{
d3.选择（this.attr）（“transform”，“translate”（+（d3.event.x）+），“+（d3.event.y）+”）；
})
.开启（“结束”，功能（d）{
d3.选择（此）.classed（“活动”，false）；
}));
g、 附加（“rect”）
.attr（“x”，100）
.attr（“y”，80）
.attr（“高度”，100）
.attr（“宽度”，200）
g、 附加（“行”）
.attr（“x1”，100）
.attr（“y1”，80）
.attr（“x2”，200）
.attr（“y2”，80）
.style（“笔划”、“紫色”）
.style（“笔划宽度”，12）

.svgClass{
边框：2倍纯红；
}

---

拖动回调正在转换剪辑路径应用到的相同

g

元素。这意味着

g

元素的剪辑路径也在变换，这就是为什么拖动形状时剪辑的形状会四处移动

下面的代码段使用灰色矩形显示剪辑路径定义，粉色矩形显示变换后的

g

元素的区域。圆保留原始剪辑形状，因为

g

元素的剪辑路径将与元素的其余部分一起平移

实际上，我想要并排拖动和剪切。。就像我在圆上拖动它一样，它应该根据剪裁区域进行剪裁..嗨。很抱歉我不知道你的意思。我的理解是，您希望剪裁区域保持在相同的位置，并且当您拖动对象时，它的外观会有所不同，因为它会被原始剪裁路径剪裁。