java如何在表中设置事件_如何在D3中的图表标签上触发onmouseover事件

我用D3制作了下面的图表：

当图表悬停时，中间的空间显示信息 .

我有以下代码来处理事件：

var path=svg.selectAll('path')

.data(pie(get(this, 'data')))

.enter()

.append('path')

.attr({

d:arc,

fill:function(d,i){

return color(d.data.name);

}

})

.on("mouseover", function(d, i) {

self.setTooltip(d.data.icon, d.data.name, d.data.value);

})

.on("mouseout", function(d, i) {

self.clearTooltip();

});

我还使用以下代码在图表上生成Font Awesome图标：

var text=svg.selectAll('text.value-label')

.data(pie(get(this, 'data')))

.enter()

.append("text")

.transition()

.duration(200)

.attr("transform", function (d) {

return "translate(" + arc.centroid(d) + ")";

})

.attr("dy", ".5em")

.attr("text-anchor", "middle")

.attr('class', 'value-label')

.text(function(d){

return d.data.icon;

})

.style({

fill:'#fff',

'font-size':'1.5em',

'font-family': 'FontAwesome'

})

/* This isn't working

.on("mouseover", function(d, i) {

self.setTooltip(d.data.icon, d.data.name, d.data.value);

})

.on("mouseout", function(d, i) {

self.clearTooltip();

});

*/

目前，中间的“工具提示”/信息仅显示鼠标指针位于图表的彩色部分上方 . 如果指针位于文本(FontAwesome)标签上方，则工具提示将保持隐藏状态 .

当鼠标指针位于图表块边界内的任何位置(包括文本标签)时，如何显示工具提示？