如何在D3中的图表标签上触发onmouseover事件 [英] How to trigger onmouseover event on chart label in D3

问题描述

我有D3制作的以下图表：

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

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

  var path = svg.selectAll（'path'）
 .data（pie（get，this） $ b .enter（）
 .append（'path'）
 .attr（{
d：arc，
 fill：function（d，i）{
 return color（d.data.name）; 
} 
}）
 .on（mouseover，function（d，i）{
 self.setTooltip（d.data。图标，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 （d）{
 returntranslate（+ 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'
 
}）
 / *这不工作
 .on（mouseover，function（d，i）{
 self.setTooltip（d.data.icon，d.data.name，d.data.value）; 
}）
 .on（mouseout，function（d，i）{
 self.clearTooltip（）; 
}）; 
 * / 
  

目前，tooltip指针是在图表的彩色片断。如果指针在文本（FontAwesome）标签之上，工具提示保持隐藏。

如果鼠标指针位于图表边界内的任何位置， ，包括文本标签？

解决方案

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

  var text = svg.selectAll（'text.value-label'）
 .data（pie（get，this，'data'）））
 .enter（）
 .append（text）
 .attr（pointer-events，none）
 // etc ... 
  
 
 
 
这样，它们后面的路径会处理mouseover事件，就像没有文本。
 
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?
解决方案
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.

                        
这篇关于如何在D3中的图表标签上触发onmouseover事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！