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

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

目前，中间的“工具提示”/信息仅在鼠标指针悬停在图表的彩色部分上时显示。如果指针位于文本 (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...

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