我用 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) 标签上方,工具提示将保持隐藏状态。
当鼠标指针位于图表块边界内的任何位置(包括文本标签)时,如何使工具提示显示?