Make legend toggle work in IE11

spec/util-spec.js

@@ -14,7 +14,9 @@ import {
     notEmpty,
     sanitise,
     isNumber,
-    flattenArray
+    flattenArray,
+    getIEVersion,
+    isIE
 } from '../src/util';
 
 describe('util.js tests', function () {
@@ -215,4 +217,15 @@ describe('util.js tests', function () {
 
     });
 
+    describe('getIEVersion and isIE', function () {
+
+        it('getIEVersion should return a number or false', function () {
+            expect(getIEVersion()).toMatch(/(\d+|false)/);
+        });
+        it('isIE should return true or false', function () {
+            expect(isIE()).toMatch(/(true|false)/);
+        });
+
+    });
+
 });

src/api.show.js

@@ -1,4 +1,5 @@
 import { Chart } from './core';
+import { isIE } from './util';
 
 Chart.prototype.show = function (targetIds, options) {
     var $$ = this.internal, targets;
@@ -10,7 +11,7 @@ Chart.prototype.show = function (targetIds, options) {
     targets = $$.svg.selectAll($$.selectorTargets(targetIds));
 
     targets.transition()
-        .style('display', 'initial', 'important')
+        .style('display', isIE() ? 'block' : 'initial', 'important')
         .style('opacity', 1, 'important')
         .call($$.endall, function () {
             targets.style('opacity', null).style('opacity', 1);

src/util.js

@@ -87,3 +87,38 @@ export var isWithinBox = function(point, box, sensitivity = 0) {
     return xStart < point[0] && point[0] < xEnd && yEnd < point[1] && point[1] < yStart;
 };
 
+/**
+ * Returns Internet Explorer version number (or false if no Internet Explorer used).
+ */
+export var getIEVersion = function() {
+    // https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie
+    const agent = window.navigator.userAgent;
+
+    let pos = agent.indexOf('MSIE '); // up to IE10
+    if (pos > 0) {
+        return parseInt(agent.substring(pos + 5, agent.indexOf('.', pos)), 10);
+    }
+
+    pos = agent.indexOf('Trident/'); // IE11
+    if (pos > 0) {
+        pos = agent.indexOf('rv:');
+        return parseInt(agent.substring(pos + 3, agent.indexOf('.', pos)), 10);
+    }
+
+    return false;
+};
+
+/**
+ * Returns whether the used browser is Internet Explorer.
+ *
+ * @param {Number} version Optional parameter to specify IE version
+ */
+export var isIE = function(version) {
+    const ver = getIEVersion();
+
+    if (typeof version === 'undefined') {
+        return !!ver;
+    }
+
+    return version === ver;
+};