d3.js-After翻譯<g>如何添加<circle>

Question

我試圖在<g>被翻譯後添加新的<circle>。 的circle座標我試圖用鼠標事件mousedown函數來獲取 協調之前，我翻譯，我可以正確地在鼠標按下座標添加<circle>但經過翻譯<g>我不能正確地添加<circle> 在鼠標按下座標。

所以我想<g>被翻譯後，我需要重新定義新的coordinate.But我只是不知道該怎麼做！

這裏是我的代碼（我用鼠標右鍵添加圓圈）：
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

嘗試族元素的getBBox方法。它將返回具有x，y位置的對象。他們會告訴你有多少元素被移動和朝哪個方向移動。