1

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

2 回答 2

3 
.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;
}

如果您在图表上使用 scale 方法，您可能需要 +/- 一些常数 k_x、k_y 来校正静态偏移以及访问比例因子，否则您可以忽略这些

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

于 2013-09-10T08:08:25.583 回答
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。

于 2012-11-02T07:36:46.710 回答