javascript - 在 d3 图中的 <g> 元素上触发悬停事件

Question

所以我使用 d3 库绘制了一个图表，它添加了大量元素以形成饼图。饼图的每个“切片”都有“.nv-slice”类。我想要做的是遍历每个切片并根据特定标准(对问题不重要)触发悬停事件。

在我的 css 中，我有一个 .nv-slice:hover 类覆盖了 d3 类；在元素上正常悬停时(例如，实际上将我的鼠标移到它上面)这会很好地覆盖。但是，尝试使用 $(g_element).trigger('hover') 失败。我调查了一下，发现 jQuery 不能像这样用在 svg/g 元素上。

我正在使用 g 元素循环

$.each($('#gender_chart .nv-slice'), function(i, value) { ... });

但是，如前所述，我不能使用

$(value).trigger('hover');

因为 jQuery 不兼容。所以我的问题是:假设我像这样循环，如何触发 g 元素的悬停事件？

Answer 1

显然您无法以编程方式触发悬停事件，因为悬停不是 trusted。事件(另见 Trigger css hover with JS )。您可以做的是添加一个类，在鼠标悬停时向元素添加一个类，并在鼠标移出时删除该类。

d3.selectAll('.nv-slice')
    .on('mouseover', function() { d3.select(this).classed('hover', true); })
    .on('mouseout', function() { d3.select(this).classed('hover', false); });