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

时间:2017-02-01 22:42:33

标签: javascript d3.js

我用D3制作了以下图表:

D3 Pie Chart

图表悬停时,中间的空格会显示信息。

我有以下代码来处理事件:

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)标签上方,则工具提示将保持隐藏状态。

当鼠标指针位于图表块边界内的任何位置(包括文本标签)时,如何显示工具提示?

1 个答案:

答案 0 :(得分:2)

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

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

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