Подключение React-Leaflet CircleMarker и точечной диаграммы при наведении

У меня есть данные GeoJSON, которые я использую для создания CircleMarkers с реагирующим листом на карте и с помощью D3.js для создания точечной диаграммы под ним.

Я хочу связать их так, чтобы при наведении указателя мыши на CircleMarker соответствующий круг на диаграмме также менял цвет заливки и обводки.

Я пытался дать каждому уникальный класс, но это выделяет каждый круг отдельно, а не одновременно.

Я не уверен, что делать дальше. Могу ли я установить идентификатор или использовать каждый ключ для этого?

Вот как я создаю 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/


reactjs javascript d3.js react-leaflet
person mendozaline    schedule 08.09.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

:hover работает с тем, на что вы активно наводите курсор, поэтому в данном случае он не сработает.

Вы можете использовать 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'})}
    >

Должен помочь вам начать в правильном направлении

person AlexVestin    schedule 11.09.2017
comment
Ты был прав. Ховер был тупиком. Я использовал d3.selectAll для изменения диаграммы, используя тот же обработчик событий. - person mendozaline; 18.09.2017

arrow_upward
-1
arrow_downward

Вы на правильном пути со свойством непрозрачности. Это один из параметров пути, который вы можете добавить непосредственно в компонент реактивной листовки. Если вы хотите изменить цвет, вы можете установить свойство цвета, которое будет эквивалентно параметру цвета в пути. См. этот пример:

<CircleMarker
  key={'cm-' + index}
  color={index === 0 ? 'red' : 'blue'}
  center={coord}
  opacity={0.5}
  >
person Evan Siroky    schedule 10.09.2017
comment
Итак, что я хочу сделать, так это заставить как CircleMarker на карте, так и круг на диаграмме изменить цвет / штрих при наведении курсора одновременно. - person mendozaline; 11.09.2017
comment
В моем примере показано, как обновить цвет. Вам также понадобятся прослушиватели событий наведения для ваших компонентов d3 и CircleMarker. - person Evan Siroky; 11.09.2017