Connecting React-Leaflet CircleMarker and a scatter plot point on hover

Question

I have GeoJSON data that I'm using to create CircleMarkers with react-leafet on a map and using D3.js to create a scatter plot below it.

I want to link the two so that when you hover over a CircleMarker it's matching circle on the chart also changes fill and stroke color.

I tried giving each a unique class, but that only highlights each circle separately, not at the same time.

I'm not sure how to proceed. Could I set an id or use each the key to do this?

Here's how I'm creating the CircleMarkers for the map and circles for the chart:

    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>
        )
})

Link to full code on jsfiddle: https://jsfiddle.net/mendoza_line/39n4rs4q/

Answer 1

:hover works on whatever you're actively hovering over, so it won't work in this case.

You can use onMouseOver and onMouseOut on the circleMarker, I'm not familiar with D3 but I'm sure it has sometthing similar

<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'})}
    >

Should get you started in the right direction

Answer 2

You're on the right track with the opacity property. That is what is one of the path options that you can add directly to a react-leaflet component. If you want to change the color, you can set the color property which would be the equivalent of the color in path option. See this example:

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