d3.js ändern Farbe und Größe auf Liniendiagramm Punkt auf Mouseover

Question

Ich machte ein Liniendiagramm mit d3.js (siehe das beigefügte Bild 1).

Ich habe Tooltips auf Grafikpunkten eingefügt, wenn Mouseover. Ich möchte auch die Farbe und Größe der Punkte ändern. Ich habe es auf viele Arten versucht, aber es scheint wirklich schwierig zu sein. Irgendeine Hilfe? Hier ist das Stück 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); 
    }); 

Answer 1

gerade eingestellten Farbe und Größe in den Handler:

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