D3 и React: добавление события наведения мыши внутри для l oop добавляет только к одному элементу

Question

Кажется, я не могу понять этого. Я работаю над некоторыми линейными диаграммами D3 в React и не могу отобразить все всплывающие подсказки.

for (let i=0; i<tooltipWith.length; i++) {
    d3.select(`#${tooltipWith[i]}-tooltip`)
        .on('mousemove', drawTooltip)
        .on('mouseout', removeTooltip);
}

Этот код в основном выполняет то, что должен - он выполняет итерацию по идентификаторам всплывающих подсказок в tooltipWith . Однако он добавляет только одно дополнительное событие мыши всплывающей подсказки. У меня есть три линейных диаграммы, где, если я наведу курсор на одну, всплывающая подсказка должна отображаться на двух других. Сейчас всплывающая подсказка отображается только на одной другой диаграмме.

render() {
    const { graphId } = this.props
    return <g className="tooltip" id={`${graphId}-tooltip`} ref={this.ref} />
}

Это метод рендеринга для моей всплывающей подсказки.

Я передаю свойства tooltipWith={['tooltip1', 'tooltip2']} в пользовательский компонент LineChart, который, в свою очередь, отображает компонент Tooltip.

Я так сбит с толку, потому что кажется, что D3 не позволяет мне добавлять несколько событий наведения мыши. В моем коде, вместо того, чтобы повторять для l oop из tooltipWith s, я вручную запускал:

d3.select(`tooltip1-tooltip`)
    .on('mousemove', drawTooltip)
    .on('mouseout', removeTooltip);
d3.select(`tooltip2-tooltip`)
    .on('mousemove', drawTooltip)
    .on('mouseout', removeTooltip);

, и при наведении курсора он по-прежнему отображал только одну другую подсказку.

Я уверен, что все мои всплывающие подсказки имеют однозначные имена, и проблема здесь не в именовании любых идентификаторов. Но я понятия не имею, что это такое. Пожалуйста, помогите!