d3pie
d3pie copied to clipboard
benkeen
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>
Hi @FearlessHyena, sorry about that. I should get some time today to look at some d3pie issues - I'll look at that then!
Found the issue - it was a non-IE friendly DOM function. However, there appear to be a few other wrinkles to iron out, too.... I'll patch those up before releasing the next version.
oh wow thanks Ben :D I wish IE would just work seamlessly like other browsers but it never does :P
hi Ben just tried v0.1.6. I do see the tooltip appearing now on IE but it seems to be behaving oddly. When you hover over to a different section of the pie the previous section tooltip doesn't disappear Here's a screenshot of what's going on
I've noticed it reproduces easier if you hover over different sections faster but if you cycle through them slowly its ok
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.
Brilliant, thanks @RyanChristian259! I'll take a look at this this weekend and try to get it into the main build. Appreciated!
@RyanChristian259 still it didn't solved in my case
<script src="js/d3.v4.min.js"></script>
<script src="js/d3pie.js"></script>
@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.
please see my comment here: https://github.com/benkeen/d3pie/issues/86#issuecomment-508120977
