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

Question

我正在尝试添加新的<circle>之后<g>被翻译了。 circle坐标我正在尝试使用鼠标事件 mousedown函数得到 在翻译之前协调我可以正确添加 <circle>在 mousedown 坐标中但翻译后 <g>我无法正确添加 <circle> 在鼠标按下的坐标中。

所以我想在<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

希望这有帮助!