d3.js-翻译后<g>如何添加<circle>

Question

在翻译<circle>后，我尝试添加新的<g>。 circle坐标我试图使用鼠标事件mousedown函数来获取 在我翻译之前的坐标我可以正确地在mousedown坐标中添加<circle>但在翻译后<g>我无法正确添加<circle> 在mousedown坐标。

所以我想在<g>翻译后我需要重新定义新的坐标。但我不知道该怎么做！

这是我的代码（我用鼠标右键添加圆圈）：
JSbin

Answer 1

您需要找到相对于组翻译的鼠标位置。

  var point = document.getElementById('root').createSVGPoint();
  point.x = event.pageX;//mouse position X
  point.y = event.pageY;//mouse position Y
  var newPoint = point.matrixTransform(container.node().getCTM().inverse());
  //newPoint is the place where you will need to draw the circle
      container.append('g')
              .append('circle')
              .attr('cx', newPoint.x)
              .attr('cy', newPoint.y)
              .attr('r', '20');

工作代码here

希望这有帮助！

Answer 2

尝试使用group元素的getBBox方法。它将返回具有x，y位置的对象。他们会告诉你元素的移动量和方向。