Question

我用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();
        });
        */

目前，中间的＆＃34;工具提示＆＃34; /信息仅显示鼠标指针位于图表的彩色部分上方。如果指针位于文本（FontAwesome）标签上方，则工具提示将保持隐藏状态。

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

Answer 1

您无需再次在文本元素中触发鼠标悬停事件。只需在文本变量中将pointer-events设置为none：

var text = svg.selectAll('text.value-label')
    .data(pie(get(this, 'data')))
    .enter()
    .append("text")
    .attr("pointer-events", "none")
    //etc...

这样，它们背后的路径将处理鼠标悬停事件，就像没有文本一样。

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

1 个答案: