Question

我的图表上有一些圆圈。当用户盘旋在一个圆圈上时，我想创建一个鼠标悬停事件并传递该圆心的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
                });
            };
        };

Answer 1

.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来校正静态偏移量以及如果你在图上使用scale方法访问比例因子，否则你可以忽略这些

*请注意，如果您可以使用D3，则可能不想尝试混合jQuery和D3，因为事件属性可能包含对可以使用的数据的引用，例如，在渲染工具提示中

Answer 2

您需要找到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。

如何获取用户鼠标悬停在圆心中的x，y坐标？

2 个答案: