每个元素有多个鼠标悬停事件

Multiple mouseover events per element

本文关键字：悬停 事件 鼠标 元素      更新时间：2023-09-26

我正在可视化一个聊天对话，在该对话中，我为每条消息添加一个表示消息长度的条形图。界面的另一部分用于显示聊天中每个用户的统计信息。

目标：当用户悬停在条形上时

  1. 高亮显示条形图（通过将灰色更改为其他颜色）
  2. 显示有关发送该消息的用户的数据

所以我想做两个mouseover事件，一个突出显示条，另一个改变显示，但似乎每个元素只能附加一个mouseoverevent。我该如何让这两个事件都火起来？

// add highlighting event to each rectangle
rects.on('mouseover', function(thisData) {
    rects.filter(function(d) { return d['userId'] === thisData['userId']; })
         .style('fill', users[thisData['userId']]['color']);
});
// further down...
// change display when highlighting a rectangle
rects.on('mouseover', function(thisData) {
    display.text(thisData['message']); // just example code
});

您可以创建2个函数，并在鼠标悬停事件上调用它们

rects.on('mouseover', function (thisData) {
    dosomething();
    dosomethingelse();
});
//define dosomething and dosomethingelse
function dosomething($var) {
    //sample code
}
function dosomethingelse() {
}

只需在一个鼠标悬停处理程序中完成所有逻辑。

rects.on('mouseover', function(thisData) {
    rects.filter(function(d) { return d['userId'] === thisData['userId']; })
        .style('fill', users[thisData['userId']]['color']);
    display.text(thisData['message']);
});
相关文章：