在悬停时连接 React-Leaflet CircleMarker 和散点图点

Question

我有 GeoJSON 数据，我正在使用这些数据在地图上创建带有 react-leafet 的 CircleMarkers，并使用 D3.js 在其下方创建散点图。

我想 link 这两个，这样当您将鼠标悬停在 CircleMarker 上时，它在图表上的匹配圆也会更改填充和描边颜色。

我试着给每个圆圈一个独特的 class，但这只会分别突出显示每个圆圈，而不是同时突出显示。

我不确定如何进行。我可以设置一个 ID 或使用每个密钥来执行此操作吗？

以下是我为地图创建 CircleMarkers 和为图表创建圆圈的方法：

    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 到 jsfiddle 上的完整代码：https://jsfiddle.net/mendoza_line/39n4rs4q/

Answer 1

您的不透明度是正确的属性。这就是您可以直接添加到 react-leaflet 组件的 path options 之一。如果你想改变颜色，你可以设置颜色属性，这相当于路径选项中的颜色。看这个例子：

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

Answer 2

：悬停适用于您主动悬停的任何内容，因此在这种情况下不起作用。

你可以在 circleMarker 上使用 onMouseOver 和 onMouseOut，我对 D3 不熟悉，但我确定它有类似的东西

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

应该让您朝着正确的方向开始

在悬停时连接 React-Leaflet CircleMarker 和散点图点

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

javascript

d3.js

reactjs

react-leaflet