events - 如何正确添加和使用D3事件？

Question

我在理解使用D3事件和调度功能时遇到麻烦。我有一个一直在研究的图表示例:“Vertical Bar Charts With Legends”。

绘制图表和图例非常容易，但是当我将鼠标悬停在图表右侧的相关文本图例上时，我想添加突出显示每个条的功能。

我已经阅读了所有事件文档，甚至看了许多示例，其中大多数都很复杂，但是我似乎缺少了一些东西。有谁知道如何最好地完成文本图例的鼠标悬停功能，该功能可以调度事件以自动更改相应竖线的颜色？

Answer 1

这个问题类似于d3-js Google网上论坛中的one you posted。在不重复我在那儿写的内容的前提下，我重申一下，您可能不希望使用d3.dispatch;。用于自定义事件抽象(例如画笔和行为)。使用本地事件会更简单。

如果您希望图例在鼠标悬停时更改相应栏的颜色，则将问题分解为以下步骤:

检测图例上的鼠标悬停。

选择相应的栏。

更改条形的填充颜色。

首先，使用selection.on侦听图例元素上的“mouseover”事件。当鼠标悬停在图例元素上时，将调用您的侦听器函数，并使用两个参数调用该函数:数据(d)和索引(i)。您可以使用此信息通过d3.select选择相应的栏。最后，使用selection.style用新颜色更改“填充”样式。

如果不确定如何在图例鼠标悬停时选择相应的栏，通常有几个选项。最简单的方法是按索引选择，假设图例元素的数量和rect元素的数量相同，并且顺序相同。在这种情况下，如果局部变量rect包含rect元素，则可以说:

function mouseover(d, i) {
  d3.select(rect[0][i]).style("fill", "red");
}

如果您不想依赖索引，则另一个选择是根据相同的数据扫描匹配的条。这使用selection.filter:

function mouseover(d, i) {
  rect.filter(function(p) { return d === p; }).style("fill", "red");
}

另一个选择是给每个区域一个唯一的ID，然后按ID选择。例如，在初始化时，您可以说:

rect.attr("id", function(d, i) { return "rect-" + i; });

然后，您可以在鼠标悬停时按ID选择矩形:

function mouseover(d, i) {
  d3.select("#rect-" + i).style("fill", "red");
}

上面的示例是人为设计的，因为我使用了索引来生成id属性(在这种情况下，使用第一种通过索引进行选择的技术更加简单快捷)。一个更现实的例子是您的数据是否具有name属性；然后，您可以使用d.name生成id属性，并同样通过id选择。如果您不想生成唯一的ID，也可以按其他属性或类进行选择。