Элемент окружности не имеет доступа

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); 
})