Question

我希望使用d3进行圆圈动画。我希望在鼠标悬停时显示圈子增长。为此，我使用了以下代码。代码运行没有错误它不会产生任何圆形动画。任何我做错的建议。请参阅下面的代码

  var vis = d3.select(e).append("svg")
  .attr("width", svgwidth)
  .attr("height", svgheight);

   var circles = vis.selectAll("circle").data(sampleData);
   var circleEnter=circles.enter().append("g").append("circle");

    var circles = vis.selectAll("circle").data(sampleData);
    var circleEnter=circles.enter().append("g").append("circle");

    circleEnter.attr("cx", function (d,i) 
            {
             Cxs[i]= xRange (d.x);
             return xRange (d.x); 
             })

    .attr("cy", function (d,i) {
        Cys[i]= yRange (d.y); return yRange (d.y);
        })

    .attr("r", 20)
    .style("fill-opacity", .2)
    .style("fill", fillColor) 

    .on("mouseover", function(d,i)
            { 


        d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r",30);
  }

     .on("mouseout", function(d,i)
            { 


        d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r",20);
  }

Answer 1

您只需要d3.select(this) - 这已经选择了circle元素：

.on("mouseover", function(d,i) {
    d3.select(this).transition()
    .duration(750)
    .attr("r",30);
}).on("mouseout", function(d,i) { 
    d3.select(this).transition()
    .duration(750)
    .attr("r",20);
})

Circle元素无法访问

1 个答案: