Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tooltips not showing up on IE

See original GitHub issue

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>

Issue Analytics

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

Top GitHub Comments

4reactions

RyanChristian259commented, Apr 19, 2017

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.

1reaction

RyanChristian259commented, Feb 16, 2018

@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.