D3。标题鼠标悬停上的圆圈颜色改变不起作用

I'm appending some text to D3.js circles and want the circles to change color mouseover, also on mouseover on the text.

我给D3加上一些文本。js圆圈和希望圆圈改变颜色鼠标悬停，同样鼠标悬停在文本上。

Currently the circles do change color on mouseover, but when hovering over the text, the circle mouseover doesn't work anymore (logical: I'm hovering over the text). How do I get the circles to also change color when hovering over the text?

目前鼠标悬停时圆圈确实会改变颜色，但当鼠标悬停在文本上方时，圆圈鼠标悬停就不再工作了(合乎逻辑:我在文本上方悬停)。当我在文本上方徘徊时，如何让圆圈也改变颜色?

My code (gnode is a earlier defined circle):

我的代码(gnode是一个早期定义的圆):

var label = gnode.append("text")
    .text(function(d) { return d.key ; })
    .attr("font-size", function(d) {return 12 + d.value[0]/4})
    .attr("text-anchor", "middle")
    .call(force.drag)
    .on("mouseover", function(d){
        this.style.cursor='pointer';
        d3.select( "#" + d.key.toLowerCase().replace(/ /g, '_'))
            .attr("id", "none")
            .classed("mouse_over",true)
            .classed("mouse_out",false);

thanks

谢谢

1 个解决方案

#1

You can achieve this by simply putting all the elements belonging together inside a group. Then attach the mouse events to the group instead of the elements themselves.

您可以通过将属于组的所有元素放在一起来实现这一点。然后将鼠标事件附加到组中，而不是元素本身。

First create svg element and append data:

首先创建svg元素并添加数据:

var svg = d3.select("#main")
    .append("svg")
    .attr("id", "svgElement")
    .attr("width", width)
    .attr("height", height);

var svgg = svg.selectAll("g.myGroup")
    .data(myData)
    .enter()
    .append("g");

Then add your elements via the each function:

然后通过每个函数添加元素:

svgg.each(function (d, i) {
    selection = d3.select(this);
    // ... append to this selection
});

Now attach mouse events to the group:

现在将鼠标事件附加到组中:

svgg.on("mouseover", function(d) {
    d3.select(this) // Select and do something
});

You can find the working fiddle here:

你可以在这里找到工作小提琴:

http://jsfiddle.net/77XLD/1/

Note that the event fires when either moving over the line of the circle and also when hovering over the text.

注意，当事件发生时，当它移动到圆圈的线上时，当它在文本上方徘徊时。

#1