javascript - 使用 d3.js 在鼠标悬停时在圆圈内显示文本

Question

过去 2 天我一直在努力实现以下要求。 Circle 的行为异常且不确定。

要求 1.当圆圈完全悬停时，文本应该在圆圈内。 2.当鼠标悬停在圆圈上，将鼠标光标放在文本上时，圆圈和文本不应闪烁。 3.隐形圆应该回到原来的半径。

这是代码

d3.select("#outerG")
    .insert("g", "#invisibleG").attr("class", "maincircles").append("circle")
    .attr("cx",120)
    .attr("cy", 120)
    .attr("r", 30)
    .attr("class", "circle")
    .style('fill', '#19b2e8');


d3.select("#invisibleG").append("g")
    .attr("class","invisibleCircle")
    .append("circle")
    .attr("cx",120)
    .attr("cy",120)
    .attr("r",30)
    .attr("class","inviCircle")
    .style('fill-opacity', '0')
    .attr("prevRadius",30)
    .attr("xcoords",120)
    .attr("ycoords",120)
.on("mouseover",function(){

var r=d3.select(this).attr("r");
d3.select(this).style('fill','#19b2e8')
                .style('fill-opacity','1')
                .transition()
                .duration(1000)
                .attr("r",50);

    var prevRadius=d3.select(this).attr("prevRadius");
    var xcoord= d3.select(this).attr("xcoords");//to centre text
    var ycoord= d3.select(this).attr("ycoords");//to centre text
        d3.select(this.parentNode).append("text")
            .transition()
            .duration(1000)
             .text("Hello")
              .attr("x",120)
              .attr("y",120)
              .style("font-family","sans-serif")
              .style("font-size","20px")
              .style("text-anchor","middle");
                     })                 

.on("mouseout",function(){
d3.select(this.parentNode).select("text").remove();
//d3.select(this).interrupt();
var r=d3.select(this).attr("prevRadius");
            d3.select(this)
            .transition()
            .duration(1000)
           .attr("r",r).attr("stroke-width",0)
                 .style('fill-opacity','0');
                 });

这是HTML

<svg width="300" height="300">
    <g id="outerG">
        <g id="invisibleG"></g>
    </g>
</svg>

检查 fiddle http://jsfiddle.net/razC9/5/

Answer 1

问题是文本在鼠标悬停时弄乱了鼠标事件，解决方案是添加这个 css

svg text {
  pointer-events: none;
}

这是现在的样子 - http://jsfiddle.net/razC9/7/