Можно ли как то выделить элемент SVG(D3) задав функцию не из самого svg?

Question

[Ninja Mate]

Сделал чарт на d3.js и там есть событие на наведение мышки

var myChart = d3.select(this.refs.chart).append("svg")
.selectAll("rect")
.on('mouseover', function(d){
                
                ...
                d3.select(this)//хочу так же но из функции на странице
                    .style('opacity', 0.5)
            })

На странице таблица, в которой нужно сделать наведение на строку со значениями и что бы выделялся соответствующий столбец. Может индекс использовать в .data(dataArray) или как то еще...

Как сделать выделение элемента через функцию?

Answer 1

[Петр]

SVG элемент является полноценным элементом страницы и к любому его дочернему элементу можно обратиться через селекторы.
document.querySelector('svg text.my-text')
Получив нужный элемент, вы можете назначить ему обработчики событий.

Comments

[Ninja Mate]

Тут я и не пойму как это сделать (не работал с svg). text.my-text где эти атрибуты брать?
В html выглядит вот так:

<rect width="106.2" height="94.86666666666666" x="108.2" y="260.8833333333333" style="fill: rgb(93, 120, 117);"></rect>

Как то можно через значения оси х выбрать?

[Петр]

Ninja Mate: Это пример был. Для данного rect вы можете указать class='my-text', чтобы легче найти было querySelector('svg rect.my-text'). Если через x то так querySelector('svg rect[x="108.2"]')

[Ninja Mate]

Петр: класс мне не поможет, их же много, скорее id... вот с x="108.2" вы меня не поняли немного, эти значения динамичны. можно ли через d3.svg.axis выделить (0..9)? Каша в голове)

[Петр]

Ninja Mate: Я d3 не использую. Вы можете выбрать все элементы rect, а затем отфильтровать в своей функции по атрибуту

[Ninja Mate]

Петр: спасибо. сделал через id. осталось придумать как onClick цвет туда-сюда менять, а то только туда