javascript - d3js data binding enter then select an element to listen to

Question

I would like to select elements from DOM and listen to mouse event when hover them.

I'm using this library ( example on link )

let trainSelect = svg.selectAll('.train-w-dir').data(schedules, function(d: ISchedule) {
    if (d != undefined) {
        return d.train;
    }
});
trainSelect
    .enter()
    .select(/ELEMENT TO SELECT/) // instead of append a new dom element as in the example
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);

What I would like to is to select a DOM element that have id attribute equal to every trainSelect array (EnterNode or placeholder ?) data.train field. Because I don't need to append a new element, but just listen to existing elements

Here the format of trainSelect items

namespaceURI: "http://www.w3.org/2000/svg"
ownerDocument: document
__data__: {remp_dest: null, cap: 922, tp_des_r: "00:20:44+00:00", dest: 271015, descentes: 0, …}
_next: null
_parent: svg#svg8727

UPDATE I tried to make selection like this trainSelect

.enter()
.each(elm => {
   return d3.select(`#${elm.train}`);
})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);

But I get this error

ERROR DOMException: Failed to execute 'querySelector' on 'Document': '#123596' is not a valid selector.

Answer 1

The problem stems from your IDs starting with a number. This makes it harder to locator with a CSS selector or when using querySelector

You would need to escape each character likes this:

document.querySelector("#\31\32\33\35\39\36")

Which is really ugly and not very usable. I would recommend appending a letter to the start of your IDs. Then you can find the elements normally without the need for escaping.