d3pie: Tooltips not showing up on IE

hi I noticed that the tooltips either show up intermittently (at the top left corner instead of near the segment you hover over) or in most cases don’t show up at all. This only happens on IE however (IE11). It works fine in FF and Chrome When I opened up the debug console in IE this exception gets thrown everytime I hover over a pie segment which is probably the issue

Unable to get property 'ownerSVGElement' of undefined or null reference
File: d3.min.js, Line: 1, Column: 5509

I’m using d3 3,5,3 and d3pie 0.1.5 here’s the code (Its basically the code from the d3pie generator)

<html>
<head></head>
<body>

<div id="pieChart"></div>

<script src="d3.min.js"></script>
<script src="d3pie.min.js"></script>
<script>
var pie = new d3pie("pieChart", {
    "header": {
        "title": {
            "text": "Programming Languages",
            "fontSize": 24,
            "font": "open sans"
        },
        "subtitle": {
            "text": "Distribution",
            "color": "#999999",
            "fontSize": 12,
            "font": "open sans"
        },
        "titleSubtitlePadding": 10
    },
    "footer": {
        "color": "#999999",
        "fontSize": 10,
        "font": "open sans",
        "location": "bottom-left"
    },
    /*"size": {
        "canvasWidth": auto
    },*/
    "data": {
        "sortOrder": "value-desc",
        "smallSegmentGrouping": {
            "enabled": true
        },
        "content": [
            {
                "label": "JavaScript",
                "value": 264131,
                "color": "#2383c1"
            },
            {
                "label": "Ruby",
                "value": 218812,
                "color": "#64a61f"
            },
            {
                "label": "Java",
                "value": 157618,
                "color": "#7b6788"
            },
            {
                "label": "Python",
                "value": 95002,
                "color": "#961919"
            },
            {
                "label": "C+",
                "value": 78327,
                "color": "#d8d239"
            },
            {
                "label": "C",
                "value": 67706,
                "color": "#e98125"
            },
            {
                "label": "Objective-C",
                "value": 36344,
                "color": "#d0743c"
            },
            {
                "label": "Go",
                "value": 264131,
                "color": "#69a5f9"
            },
            {
                "label": "Groovy",
                "value": 218812,
                "color": "#5a378f"
            }
        ]
    },
    "labels": {
        "inner": {
            "hideWhenLessThanPercentage": 3
        },
        "mainLabel": {
            "fontSize": 11
        },
        "percentage": {
            "color": "#ffffff",
            "decimalPlaces": 0
        },
        "value": {
            "color": "#adadad",
            "fontSize": 11
        },
        "lines": {
            "enabled": true,
            "style": "straight"
        }
    },
    "tooltips": {
        "enabled": true,
        "type": "placeholder",
        "string": "{label}: {value}, {percentage}%",
        "styles": {
            "backgroundColor": "#040404"
        }
    },
    "effects": {
        "pullOutSegmentOnClick": {
            "effect": "back",
            "speed": 400,
            "size": 12
        }
    },
    "misc": {
        "gradient": {
            "enabled": true,
            "percentage": 100
        }
    }
});
</script>

</body>
</html>

About this issue

Original URL
State: open
Created 9 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

I implemented a fix for this issue on a fork of the d3pie library. You can check it out here. https://github.com/RyanChristian259/d3pie/tree/IE11TooltipFix I’ll submit a PR for this library (Ben Keen’s d3pie), but until it’s merged you’ll still have this problem.

Here’s a snippet of my fix. It’s just the if statement after the comment. This is on line 1815 of d3pie.js on my fork. You also see it on line 65 of d3pie-source/_tooltips.js, also on my fork.

showTooltip: function(pie, index) {
	  var fadeInSpeed = pie.options.tooltips.styles.fadeInSpeed;
	  if (tt.currentTooltip === index) {
		  fadeInSpeed = 1;
	  }
    //IE11 Tooltip hangup fix
    if (tt.currentTooltip !== index) {
        this.hideTooltip(pie, tt.currentTooltip);
    }
    tt.currentTooltip = index;
    d3.select("#" + pie.cssPrefix + "tooltip" + index)
      .transition()
      .duration(fadeInSpeed)
      .style("opacity", function() { return 1; });

    tt.moveTooltip(pie);
  },

Cheers, Ryan C.

RyanChristian259 on Apr 19, 2017

@kuldip1490 I never used this fix with D3, version 4. I only tested it with D3, version 3. That might be the problem. I would check into trying a D3 downgrade to version 3 first. I no longer have access to the project that I used the fix in, so I can’t test it myself any longer. We moved ended up moving away from the D3Pie solution due to small issues like this.

RyanChristian259 on Feb 16, 2018

Brilliant, thanks @RyanChristian259! I’ll take a look at this this weekend and try to get it into the main build. Appreciated!

benkeen on Apr 20, 2017