Question

过去2天我一直在努力达到以下要求。 Circle表现异常且不确定。

要求当圆圈徘徊时，文本应该进入圆圈内。 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>

检查小提琴http://jsfiddle.net/razC9/5/

Answer 1

问题是文本在鼠标悬停时搞乱鼠标事件，解决方法是添加此css

svg text {
  pointer-events: none;
}

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

Answer 2

根据您的要求，这是一个工作小提琴。它用1个圆圈而不是2个圆圈完成，干掉了一些代码。编辑：一旦半径完全展开，时间设置为闪烁文本：

http://jsfiddle.net/razC9/42/

关键代码：

.on("mouseover", function(){ 

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

    d3.select("#outerG") .append("text")
      .transition().delay(750)
      .attr("class", "text")
      .text("Hello")
      .attr("x", 100)
      .attr("y", 120)
      .attr("fill",  "black");

 })
 .on("mouseout", function(){ 
      d3.select(this)
         .transition().attr("r", 20)
         .style("fill", "#19b2e8");

    d3.select("#outerG").select(".text").remove();      
 });

使用d3.js在mousehover上显示圆圈内的文本

2 个答案: