d3js 数据绑定回车然后选择要监听的元素答案

【问题标题】：d3js data binding enter then select an element to listen tod3js 数据绑定回车然后选择要监听的元素
【发布时间】：2020-02-04 23:07:01
【问题描述】：

我想从 DOM 中选择元素并在悬停时监听鼠标事件。

我正在使用this library（链接上的示例）

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);

我想要选择一个 DOM 元素，它的 id 属性等于每个 trainSelect 数组（EnterNode 或占位符？）data.train 字段。因为我不需要追加新元素，只需要听现有元素即可

这里trainSelect项目的格式

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

更新我试图做出这样的选择火车选择

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

但我得到了这个错误

错误 DOMException：无法在“文档”上执行“querySelector”：“#123596”不是有效的选择器。

【问题讨论】：

这显然是XY-problem。就像我在您的其他两个问题上已经提到的那样：您正在尝试修复一个您认为应该解决您的问题的弯曲解决方案。我强烈建议您清理您的问题并发布一个新问题来描述您的问题或您想要实现的目标，而不是乱用这种方法。另外，尝试设置一个minimal reproducible example，即一个可执行的演示来玩。我相信用不了多久你就会得到一个体面的答案。
这是我的问题与演示stackoverflow.com/questions/58277723/…

标签： javascript d3.js

【解决方案1】：

问题源于您的 ID 以数字开头。这使得使用 CSS 选择器或使用 querySelector

时更难定位

您需要像这样转义每个字符：

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

这真的很丑而且不太好用。我建议在您的 ID 开头附加一个字母。然后就可以正常查找元素了，不需要转义。

【讨论】：