如何通过鼠标悬停获取柱状图中的目标house元素？

核心实现方式 #

• 事件触发获取：给house对应的柱状元素绑定点击/hover等事件，在回调中直接获取当前触发事件的目标元素
• 直接选择获取：利用DOM选择器，通过元素的类名、属性等标识定位到目标house的柱状元素

代码示例 #

方式1：通过点击事件获取目标元素

// 假设柱状条统一类名为'bar'，且每个条的data属性存储house标识
document.querySelectorAll('.bar').forEach(bar => {
  bar.addEventListener('click', function() {
    // this即为当前点击的目标house对应的柱状元素
    const targetHouseElement = this;
    // 可进一步提取元素关联的house数据
    const houseInfo = targetHouseElement.dataset.house;
    console.log('目标house元素:', targetHouseElement);
    console.log('关联house信息:', houseInfo);
  });
});

方式2：直接选择指定house的元素

// 假设目标house的标识为'gryffindor'，通过属性选择器定位
const targetHouseElement = document.querySelector('.bar[data-house="gryffindor"]');
if (targetHouseElement) {
  console.log('目标house元素:', targetHouseElement);
}

可视化库适配（以D3.js为例） #

如果柱状图是用可视化库生成的，可通过库自带API获取：

// 筛选出对应house的柱状元素并转为DOM节点
const targetHouseElement = d3.selectAll('.bar')
  .filter(d => d.houseName === 'gryffindor')
  .node();

内容的提问来源于stack exchange，提问作者Ivan Kondratev