如何獲取用戶鼠標懸停的圓心的x，y座標？

我有一個圖表，上面有一些圈子。當用戶將鼠標懸停在圓上時，我想創建一個鼠標懸停事件並傳遞該圓的中心的x和y座標。我怎麼做？如何獲取用戶鼠標懸停的圓心的x，y座標？

svg.selectAll("circle") 
     .data(data) 
     .enter().append("circle") 
     .attr("cx", function(d) { return x(d.number); }) 
     .attr("cy", function(d) { return y(d.area); }) 
     .call(d3.my_helper.tooltip(function(d, i){return "Area: "+ d.area;})); 

d3.my_helper.tooltip = function(accessor){ 
      return function(selection){ 
       var circle_x = ???; // the center of the circle 
       var circle_y = ???; // the center of the circle 
       selection.on("mouseover", function(d, i){ 
        // do stuff here with circle_x and circle_y 
       }); 
      }; 
     };

來源

2012-11-02 Marissa Levy

你需要找到SVG ELEM的偏移本身，然後添加「CY」屬性（中心y）與y座標和「CX」屬性（中心x）的x座標相應：

$('circle').hover(function (ev) { 
    var svgPos = $('svg').offset(), 
     x = svgPos.left + $(ev.target).attr('cx'), 
     y = svgPos.top + $(ev.target).attr('cy'), 
     coords = [x, y]; 

    // coords now has your coordinates 
});

如果你不使用jQuery，可以考慮使用的元素通常懸停事件偵聽器以及.offsetTop和.offsetLeft。

來源

2012-11-02 07:36:46 Vinay

thx！ BackPlane祝您好運！ –

哈哈沒問題，謝謝！ :-) – Vinay

在d3鼠標處理程序中，「this」被設置爲觸發事件的svg元素，因此您可以詢問它是否爲cx和cy屬性。 – Superboggly

.on('mouseover', function(d) { 
    var target_x = d3.event.target.cx.animVal.value*scale + k_x; 
    var target_y = d3.event.target.cx.animVal.value*scale + k_y; 
}

你可能需要一些+/-不斷k_x，k_y糾正靜態補償以及訪問比例因子，如果你使用的是圖形上的刻度方法，否則你可以忽略這些

*請注意，如果您可以使用D3，您可能不想嘗試混合jQuery和D3，因爲事件屬性可能包含對可以使用的數據的引用，例如，在呈現工具提示

來源

2013-09-10 08:08:25

如何獲取用戶鼠標懸停的圓心的x，y座標？

回答

相關問題