d3.js change de couleur et de taille sur un point de graphique en ligne sur mouseover

J'ai fait un graphique avec d3.js (voir l'image jointeUn).

J'ai réussi à insérer des info-bulles sur le graphique les points lors du passage de la souris.
J'aimerais changer la couleur et la taille des points trop. J'ai essayé de plusieurs façons, mais il semble vraiment difficile. Toute aide?
Voici le morceau de code:

  svg.selectAll("dot")    
    .data(data)         
    .enter().append("circle")                               
    .attr("r", 5.5)
    .style("fill", "#fff8ee")    
       .style("opacity", .8)      //set the element opacity
.style("stroke", "#f93")    //set the line colour
 .style("stroke-width", 3.5) 
    .attr("cx", function(d) { return x(d.date); })       
    .attr("cy", function(d) { return y(d.close); })     
    .on("mouseover", function(d) {   

        div.transition()        
            .duration(70)      
            .style("opacity", .7)

             ;      
        div .html(formatTime(d.date) + "<br/>"  + d.close)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        div.transition()        
            .duration(200)      
            .style("opacity", 0);   
    });

source d'informationauteur andriatz

  1. 30

    Juste de définir la couleur et la taille en gestionnaires:

    .on("mouseover", function(d) {
  d3.select(this).attr("r", 10).style("fill", "red");
})                  
.on("mouseout", function(d) {
  d3.select(this).attr("r", 5.5).style("fill", "#fff8ee");
});