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

Question

I've got the following chart made with D3:

The space in the middle displays information when the chart is hovered over.

I have the following code to handle the event:

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

I also use the following code to generate Font Awesome icons on the chart:

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

Currently, the "tooltip"/information in the middle only shows when mouse pointer is over a coloured piece of the chart. If the pointer is above the text (FontAwesome) label, tooltip remains hidden.

How do I make the tooltip display when mouse pointer is anywhere within the boundaries of the chart piece, including the text label?

Answer 1

You don't need to trigger the mouseover events again in your text elements. Just set pointer-events to none in your text variable:

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

That way, the paths behind them will handle the mouseover events just as if there were no texts.