連接React-Leaflet CircleMarker和懸停點上的散點圖

我有GeoJSON數據，我正在使用它在地圖上創建CircleMarkers與react-leafet並使用D3.js在它下面創建散點圖。連接React-Leaflet CircleMarker和懸停點上的散點圖

我想鏈接兩個，這樣當您將鼠標懸停在CircleMarker上時，圖表上的匹配圓也會更改填充和筆觸顏色。

我試着給每一個獨特的類，但只分別突出每個圓圈，而不是在同一時間。

我不確定如何繼續。我可以設置一個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> 
     ) 
})

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

來源

2017-09-08 mendozaline

：懸停適用於任何你積極徘徊，所以它不會在這種情況下工作。

您可以在circleMarker使用的onMouseOver和onmouseout，我不熟悉，D3，但我敢肯定它sometthing類似

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

應該讓你在正確的方向開始

來源

2017-09-11 16:24:29 AlexVestin

你說得對。哈弗是一個死衚衕。我使用d3.selectAll來使用相同的事件處理程序來更改圖表。 – mendozaline

你在正確的軌道上的不透明度屬性。這就是path options之一，您可以直接將其添加到反應傳單組件。如果要更改顏色，可以設置與路徑中的顏色等效的顏色屬性選項。看到這個例子：

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

來源

2017-09-10 20:30:27

那麼什麼我想要做的是使地圖上的CircleMarker和圖表上的圓圈在同時盤旋時改變顏色/筆畫。 – mendozaline

我的示例顯示瞭如何更新顏色。您還需要d3和CircleMarker組件的懸停事件偵聽器。 –

連接React-Leaflet CircleMarker和懸停點上的散點圖

回答

相關問題