将React-Leaflet CircleMarker和悬停点上的散点图连接起来

门多萨林

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

我想将两者链接在一起，以便当您将鼠标悬停在CircleMarker上时，图表上匹配的圆圈也会更改填充和描边颜色。

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

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

这是我为地图和图表创建圆圈的方式：

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

链接到jsfiddle上的完整代码：https ://jsfiddle.net/mendoza_line/39n4rs4q/

亚历克斯·维斯汀

：hover可以在您正在悬停的任何地方工作，因此在这种情况下将无法工作。

您可以在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'})}
    >

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。