Javascript 如果用户单击d3.js中的圆，如何防止拖动？

我有组元素，它有圆形和矩形元素。用户可以拖动group元素，这样rect和circle元素都会移动。它工作得很好。但是如果用户单击circle元素，我需要防止拖动

常数x=100；
变量y=100；
var grid=d3。选择（“svg区域”）；
var g=网格。附加（“g”）
.attr（“transform”，`translate（${x}，${y}）`）
.call（d3.drag（）
.on（“拖动”，函数（）{
var x1=d3.event.x-30；
变量y1=d3.事件y-10；
d3.选择（this）.attr（“transform”，“translate”（）+
（x1）+“，”+（y1）+“）
}));
新节点（g）；
函数newNode（g，text）{
var textWid=100；
console.log（'wid'，textWid）；
g、 附加（“rect”）
.attr（“类”、“新节点”）
.attr（“x”，“10”）
.attr（“y”，“0”）
.attr（“rx”，“6”）
.attr（“ry”，“6”）
.attr（“宽度”，textWid）
.attr（“高度”，“35”）
.样式（“填充”、“8c259f”）
.style（“笔划”，“#222”）
.样式（“光标”、“移动”）；
g、 附加（“圆圈”）
.attr（“类”、“新节点”）
.attr（“cx”，“10”）
.attr（“cy”，“17”）
.attr（“r”和“6”）
.style（“fill”、“dedede”）
.style（“笔划”，“#b2b0b0”）
.style（“光标”、“指针”）
.打开（“单击”，功能（d）{
/*d3.event.preventDefault（）；
d3.event.stopPropagation（）；
*/
});
}

---

最简单的方法——最接近您的代码的方法——是将

打开（“单击”

更改为

打开（“鼠标向下”

）。再次释放鼠标按钮时，会注册一个“单击”事件。“鼠标向下”事件在此之前会清楚注册。而鼠标向下事件就是触发“dragstart”的事件

常数x=100；
变量y=100；
var grid=d3。选择（“svg区域”）；
var g=网格。附加（“g”）
.attr（“transform”，`translate（${x}，${y}）`）
.call（d3.drag（）
.on（“拖动”，函数（）{
var x1=d3.event.x-30；
变量y1=d3.事件y-10；
d3.选择（this）.attr（“transform”，“translate”（）+
（x1）+“，”+（y1）+“）
}));
新节点（g）；
函数newNode（g，text）{
var textWid=100；
console.log（'wid'，textWid）；
g、 附加（“rect”）
.attr（“类”、“新节点”）
.attr（“x”，“10”）
.attr（“y”，“0”）
.attr（“rx”，“6”）
.attr（“ry”，“6”）
.attr（“宽度”，textWid）
.attr（“高度”，“35”）
.样式（“填充”、“8c259f”）
.style（“笔划”，“#222”）
.样式（“光标”、“移动”）；
g、 附加（“圆圈”）
.attr（“类”、“新节点”）
.attr（“cx”，“10”）
.attr（“cy”，“17”）
.attr（“r”和“6”）
.style（“fill”、“dedede”）
.style（“笔划”，“#b2b0b0”）
.style（“光标”、“指针”）
.on（“鼠标向下”，功能（d）{
d3.event.preventDefault（）；
d3.event.stopPropagation（）；
});
}

---

最简单的方法——最接近您的代码的方法——是将

打开（“单击”

更改为

打开（“鼠标向下”

）。再次释放鼠标按钮时，会注册一个“单击”事件。“鼠标向下”事件在此之前会清楚注册。而鼠标向下事件就是触发“dragstart”的事件

常数x=100；
变量y=100；
var grid=d3。选择（“svg区域”）；
var g=网格。附加（“g”）
.attr（“transform”，`translate（${x}，${y}）`）
.call（d3.drag（）
.on（“拖动”，函数（）{
var x1=d3.event.x-30；
变量y1=d3.事件y-10；
d3.选择（this）.attr（“transform”，“translate”（）+
（x1）+“，”+（y1）+“）
}));
新节点（g）；
函数newNode（g，text）{
var textWid=100；
console.log（'wid'，textWid）；
g、 附加（“rect”）
.attr（“类”、“新节点”）
.attr（“x”，“10”）
.attr（“y”，“0”）
.attr（“rx”，“6”）
.attr（“ry”，“6”）
.attr（“宽度”，textWid）
.attr（“高度”，“35”）
.样式（“填充”、“8c259f”）
.style（“笔划”，“#222”）
.样式（“光标”、“移动”）；
g、 附加（“圆圈”）
.attr（“类”、“新节点”）
.attr（“cx”，“10”）
.attr（“cy”，“17”）
.attr（“r”和“6”）
.style（“fill”、“dedede”）
.style（“笔划”，“#b2b0b0”）
.style（“光标”、“指针”）
.on（“鼠标向下”，功能（d）{
d3.event.preventDefault（）；
d3.event.stopPropagation（）；
});
}