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

Question

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

目标：当用户将鼠标悬停在栏上时

突出显示栏（通过从灰色更改为其他颜色）
显示有关发送该消息的用户的数据

所以我想做两个鼠标悬停事件，一个突出显示栏，另一个改变显示，但似乎每个元素只能附加一个鼠标悬停事件。我将如何触发这两个事件？

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

Answer 1

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

rects.on('mouseover', function (thisData) {
    dosomething();
    dosomethingelse();
});

//define dosomething and dosomethingelse
function dosomething($var) {
    //sample code
}

function dosomethingelse() {

}

Answer 2

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

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

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

Multiple mouseover events per element

javascript

d3.js