Question

所以我有一个使用d3库绘制的图形，它添加了一大堆元素来形成饼图。每个片段＆＃39;饼图中有类＆＃39; .nv-slice＆＃39;。我要做的是循环遍历每个切片并根据特定标准触发悬停事件（对问题不重要）。

在我的CSS中，我有一个.nv-slice：悬停类，它覆盖了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）。你可以做的是添加一个类来为鼠标悬停时的元素添加一个类，并在mouseout上删除该类。

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

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

1 个答案: