Question

我将一些文字附加到D3.js圈子，并希望圈子更改颜色鼠标悬停，也可以在鼠标悬停在文本上。

目前圈子确实会在鼠标悬停时改变颜色，但是当鼠标悬停在文本上时，鼠标悬停不再起作用（逻辑：我将鼠标悬停在文本上）。当将鼠标悬停在文本上时，如何让圆圈也改变颜色？

我的代码（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);

感谢

Answer 1

您只需将属于一起的所有元素放在一个组中即可实现此目的。然后将鼠标事件附加到组而不是元素本身。

首先创建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");

然后通过each函数添加您的元素：

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

现在将鼠标事件附加到该组：

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

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

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

请注意，当在圆圈上移动时以及将鼠标悬停在文本上时，事件都会触发。

D3.js：标题鼠标悬停上的圆形颜色变化不起作用

1 个答案: