web-dev-qa-db-fra.com

d3.js change la couleur et la taille sur le graphique en ligne point sur la souris

J'ai fait un graphique linéaire avec d3.js (voir l'image jointe 1 ).

J'ai réussi à insérer des info-bulles sur les points du graphique lors du survol de la souris. J'aimerais également changer la couleur et la taille des points. J'ai essayé de plusieurs façons mais cela semble vraiment difficile. De l'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);   
    });
javascriptjqueryd3.jsdata-visualization
13
andriatz

Définissez simplement la couleur et la taille dans les 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");
});
35
Lars Kotthoff

Je ne sais pas pourquoi, mais alors que d3.select(this) fonctionnait, ce n'est plus le cas. J'utilise maintenant d3.select(event.currentTarget).

Donc, si nous considérons svg comme le graphique et tous ses cercles étant rouges par défaut, nous pouvons changer la couleur des cercles en vert sur mouseover et retourner la couleur en rouge sur mouseout comme ceci:

svg.on("mouseover", function(d){
d3.select(event.currentTarget)
.style("fill", "green");
})
.on("mouseout", function(d){
d3.select(event.currentTarget)
.style("fill", "red");
});
0
amunnelly