D3 élément de cercle reste lorsque la souris sur la mise à jour des données

Question

J'ai un graphique Dseries composé de chemin de la ligne et à chaque point de données j'utilise un cercle qui est ajouté aux lignes. Les cercles ont un événement d'entrée de souris attaché et lorsque la souris est déplacée sur le cercle, il affiche l'info-bulle avec les informations sur ce point de données et je change également la classe du cercle afin qu'il apparaisse en surbrillance. Le problème que j'ai, c'est que lorsque la souris est sur le cercle et que le cercle est en surbrillance et que l'info-bulle est affichée, en même temps, si j'obtiens de nouvelles données et que le graphique est mis à jour, over ne disparaît pas même lorsque la souris est retirée du cercle et elle montre ce cercle suspendu au milieu sans être attaché à aucune ligne. J'ai joint l'image du tableau montrant le problème.

Toute aide pour résoudre ce problème sera grandement appréciée.

Image showing d3 issue

Voici le code jsfiddle montrant la question. Essayez de pointer votre souris sur le cercle et attendez que le graphique pour mettre à jour toutes les 5 secondes

Answer 1

(Le déplacement de ce de la section commentaire)

Jetez un oeil à ceci: https://jsfiddle.net/xvLgq8mn/

Dans la fonction updateChart vous sélectionnez par la classe circle:

// update the circles at each data points 
svg.selectAll('.circle') // here you correctly select all with the circle class 
     .data(this.props.data) 
     .attr('class', 'circle all') 
     .transition() 
     .duration(500) 
     .attr('cx', (d) => { return this.axis.x(d.time);}) 
     .attr('cy', (d) => { return this.axis.y(d.count);}); 

mais ici, sur mouseover, vous supprimez la classe circle et le remplacer par circle--highlight:

group.selectAll() 
    .data(this.props.data) 
    .enter().append('circle') 
      .attr('class', 'circle all') 
      .attr('cx', (d) => { return this.axis.x(d.time);}) 
      .attr('cy', (d) => { return this.axis.y(d.count);}) 
      .attr('r', 4) 
      .on('mousemove', function(d) { 
       // START: Show tooltip 
       div.transition() 
       .duration(1000) 
       .style('opacity', 1); 

       div.html('<div class="date--time">' 
       + d.time 
       + '</div><div class="count">' + d.count + ' incidents</div>') 
       .style('left', (d3.event.pageX) + 'px') 
       .style('top', (d3.event.pageY - 70) + 'px'); 

       d3.select(this) 
       .attr('r', 6) 
       .attr('class', 'circle--highlight'); // here you change the class from circle all 
       // to just circle--highlight, 
       // so when you are hovering a circle and the chart changes, 
       // the circle you have hovered won't be updated because 
       // it won't be selected due to the class difference 

       // END: Show tooltip 
      }) 
      .on('mouseleave', function() { 
       // hide tooltip and return the circles to original style 
       div.transition() 
       .duration(500) 
       .style('opacity', 0); 

       // set the circle back to normal 
       d3.select(this) 
       .attr('r', 4) 
       .attr('class', 'circle all'); 
      }); 

Ainsi, une solution serait d'ajouter également la classe circle avec le circle--highlight comme ceci:

d3.select(this) 
       .attr('r', 6) 
       .attr('class', 'circle circle--highlight'); 

Ou changer votre sélection dans le updateChart comme ceci:

svg.selectAll('circle') 

mais aurait besoin de beaucoup plus d'ajustements à votre script afin qu'il fonctionne comme prévu.

Espérons que cela aide! Bonne chance!