Javascript D3 JS-使用硬编码的边界框属性使多边形可拖动不起作用

我使用D3鼠标事件绘制了一个多边形，如图所示

下面是获取多边形边界框并设置多边形边界框属性的方法

function completePolygon() {
  d3.select('g.outline').remove();

  gPoly = svgCanvas.append('g')
    .classed("polygon", true);

  polyPoints.splice(polyPoints.length - 1);

  polyEl = gPoly.append("polygon")
    .attr("points", polyPoints);

  for (var i = 0; i < polyPoints.length; i++) {
    gPoly.append('circle')
      .attr("cx", polyPoints[i][0])
      .attr("cy", polyPoints[i][1])
      .attr("r", 4)
      .call(dragBehavior);
  }

  isDrawing = false;
  isDragging = true;

  bbox = polyEl._groups[0][0].getBBox();
  var bbox2 = gPoly._groups[0][0].getBBox();

  //Altering the bounding box's attribute of polygon
  bbox.x = 0;
  bbox.y = 0;
  bbox.width = 50;
  bbox.height = 50;

  gPoly.attr("transform", "translate(" + 0 + "," + 0 + ")");
  // polyEL.attr("transform", "translate(" + 0 + "," + 0 + ")");
  //
  // gPoly.call(d3.drag().on("drag", movePolygon(bbox)));
}

函数completePolygon（）{
d3.选择（'g.outline'）。删除（）；
gPoly=svgCanvas.append（'g'）
.分类（“多边形”，真）；
多点拼接（多点长度-1）；
polyEl=gPoly.append（“多边形”）
.attr（“点”，多点）；
对于（var i=0；i

我想让整个多边形都可以拖动。我尝试获取绘制的多边形的边界框，并将X和Y坐标设置为0，然后像在本文中对圆形和矩形元素所做的那样拖动平移它，但是更改多边形的边界框属性似乎不会对多边形元素产生影响。然而，多边形的平移是可行的

---

除了循环遍历多边形的二维坐标数组并更新其上的所有坐标点以实现可拖动多边形之外，还有其他方法吗？

我真的不懂这些

getBBox（）

东西。为什么不使用传统方式拖动元素

gPoly.call(d3.drag().on("drag", function(d) {
    d3.select(this).attr("transform", "translate(" +
        (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")")
}));

以下是更改后的代码：

d3.选择（'#poly'）。打开（'click'，function（）{
新多边形（）；
});
var w=600，
h=500；
var svgCanvas=d3.select（'body'）.append（'svg'）.attr（'width'，w.）.attr（'height'，h）；
函数多边形（）{
var多点=[]；
var gContainer=svgCanvas.append（'g'）.classed（“outline”，true）；
var isDrawing=错误；
var IsDraging=错误；
变量linePoint1，linePoint2；
var起始点；
var-bbox；
var-boundingRect；
变异形状；
var gPoly；
var polyDraw=svgCanvas.on（“鼠标向下”，设定点）
.on（“鼠标移动”，抽绳）
.on（“mouseup”，决定性地）；
var dragBehavior=d3.drag（）.on（“drag”，alterPolygon）；
//var dragPolygon=d3.drag（）.on（“drag”，movePolygon（bbox））；
//关于mousedown-多边形的设置点
函数设定点（）{
如果（IsDraging）返回；
isDrawing=true；
var plod=d3.小鼠（此）；
linePoint1={
x:plod[0]，
y:plod[1]
};
多点推（plod）；
var circlePoint=gContainer.append（“圆”）
.attr（“cx”，linePoint1.x）
.attr（“cy”，linePoint1.y）
.attr（“r”，4）
.attr（“起点”，真）
.classed（“句柄”，真）
.样式（“光标”、“指针”）；
//如果鼠标在手柄上向下移动，则在设置点上
if（d3.event.target.hasAttribute（“句柄”））{
完全多边形（）
}
}
//在mousemove上-将SVG线元素附加到点
函数drawline（）{
if（isDrawing）{
linePoint2=d3.鼠标（此）；
gContainer.select（'line'）.remove（）；
gContainer.append（'行'）
.attr（“x1”，linePoint1.x）
.attr（“y1”，linePoint1.y）
.attr（“x2”，linePoint2[0]-2）//由于圆圈光标悬停不起作用，必须减去任意值
.attr（“y2”，linePoint2[1]-2）；//必须测试任意值
}
}
//在鼠标上-删除占位符SVG线并添加多段线
函数decidePoly（）{
gContainer.select（'line'）.remove（）；
gContainer.select（'polyline'）.remove（）；
var polyline=gContainer.append（'polyline'）.attr（'points'，polyPoints）；
gContainer.selectAll（'circle'）.remove（）；
对于（var i=0；i