我用 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) 标签上方,工具提示将保持隐藏状态。
当鼠标指针位于图表 block 边界内的任何位置(包括文本标签)时,如何使工具提示显示?
最佳答案
您不需要在文本元素中再次触发鼠标悬停事件。只需在文本变量中将 pointer-events
设置为 none
即可:
var text = svg.selectAll('text.value-label')
.data(pie(get(this, 'data')))
.enter()
.append("text")
.attr("pointer-events", "none")
//etc...
这样,它们后面的路径将处理鼠标悬停事件,就像没有文本一样。
关于javascript - 如何在D3中的图表标签上触发onmouseover事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41991212/