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