首页 文章

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

提问于
浏览 次
1

我用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）标签上方，则工具提示将保持隐藏状态 .

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

javascript d3.js

1 回答

  • 2

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

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

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

    回复于

相关问题