如何使用D3.js在SVG中的ag元素中獲取圓的位置

Question

我在SVG中的g元素內有一個圓圈。 g元素可以根據x坐標簡單地移動。 g元素的位置可以隨其移動而改變。 圓也按照該g元素的原樣移動。 我的問題是如何獲取該圓在SVG中的位置而不是其在g元素中的位置？ 我嘗試了以下代碼，但無法獲得期望的結果： circleGroup.on("mouseover", function() { var translate = d3.transform(d3.select(this).attr("transform")).translate; alert(translate[0].x); });

有人可以幫助我在g元素中而不在g元素中檢索圓的位置嗎？ 我需要獲取圓的位置才能從其在SVG中的位置而不是圓所在的g元素開始繪制一條線。非常感謝您的協助。 這是： JsFiddle

Answer 1

如果您希望將鼠標懸停在圓上，請在圓上創建.on處理程序，而不是g元素（通過這種方式，您知道哪個元素接收了事件）：

...
var circles = circleGroup.selectAll("circle")
    .data(circleData)
    .enter()
    .append("circle")
    .on("mouseover", mouseover)
...

function mouseover() {
   var self = d3.select(this);
   alert(self.attr('cx'));
}

更新小提琴 。

編輯評論

糟糕，錯過了過渡。 怎么樣：

function mouseover()
{
    var self = d3.select(this);
    var translate = d3.transform(self.attr("transform")).translate;
    alert(+self.attr('cx') + translate[0]);
}

更新小提琴2 。