Connexion de React-Leaflet CircleMarker et d'un point de dispersion sur hover

Question

J'ai des données GeoJSON que j'utilise pour créer des CircleMarkers avec react-leafet sur une carte et en utilisant D3.js pour créer un diagramme de dispersion en dessous.

Je veux lier les deux afin que lorsque vous passez la souris sur un CircleMarker, son cercle correspondant sur le graphique change également la couleur du remplissage et du trait.

J'ai essayé de donner à chacun une classe unique, mais cela ne fait que souligner chaque cercle séparément, pas en même temps.

Je ne sais pas comment procéder. Puis-je définir un ID ou utiliser chaque clé pour le faire?

Voilà comment je crée les CircleMarkers pour la carte et les cercles du graphique:

const chartDots = pointsData.features.map((pt, index) => { 
     return (
      <circle 
       key={"circle-" + index} 
       className={"myClass-" + index} 
       fill="dodgerBlue" 
       cx={xScale(pt.properties.value1)} 
       cy={yScale(pt.properties.value2)} 
       opacity={0.5} 
       r={10} 
      > 
      <title>Name: {pt.properties.name}</title> 
      </circle> 
    ) 
}) 

    const myPoints = pointsData.features.map((pt, index) => { 
    const coord = [pt.geometry.coordinates[1], pt.geometry.coordinates[0]] 
    return (
      <CircleMarker 
       key={'cm-' + index} 
       className={"myClass-" + index} 
       center={coord} 
       opacity={0.5} 
      > 
       <Popup> 
       <span>{pt.properties.name}</span> 
       </Popup> 
      </CircleMarker> 
     ) 
}) 

Lien vers le code complet sur jsFiddle: https://jsfiddle.net/mendoza_line/39n4rs4q/

Answer 1

: hover fonctionne sur tout ce que vous planez activement, donc cela ne fonctionnera pas dans ce cas.

Vous pouvez utiliser onMouseOver et onMouseOut sur le circleMarker, je ne suis pas familier avec D3 mais je suis sûr qu'il a sometthing similaire

<CircleMarker 
     key={'cm-' + index} 
     className={"myClass-" + index} 
     center={coord} 
     opacity={0.5} 
     onMouseOver={(e) => e.target.setStyle({fillColor: 'green'})} 
     onMouseOut={(e) => e.target.setStyle({fillColor: 'blue'})} 
    > 

devrait vous aider à démarrer dans la bonne direction

Answer 2

Vous êtes sur la bonne voie avec l'opacité propriété. C'est l'un des path options que vous pouvez ajouter directement à un composant de la feuille de réaction. Si vous voulez changer la couleur, vous pouvez définir la propriété de couleur qui serait l'équivalent de l'option de couleur dans le chemin. Voir cet exemple:

<CircleMarker 
    key={'cm-' + index} 
    color={index === 0 ? 'red' : 'blue'} 
    center={coord} 
    opacity={0.5} 
    >