Skip inclusion of d3.js for Internet Explorer

Question

I have a project that uses the latest version of d3 (v6), I include the api as follows in my index.html:

        <script src="scripts/d3.js"></script>

This version of d3 does not support IE, I get a console error as the ECMA version of Javascript in IE does not support => for example.

This is fine for me as I test if window.d3 exists and if not then I show something else instead of my d3 chart.

But I would like to not have this console error.

So how do I only include d3.js if the browser is not IE?

Thanks

Does this question help? https://stackoverflow.com/questions/5505155/how-not-to-load-a-script-in-ie. If you're feeling ambitious, you also might be able to transpile an IE compatible version of d3 with babel — Steve, Dec 01 '20 at 16:30

score 1 · Accepted Answer · answered Dec 02 '20 at 07:09

You can check the browser userAgent to check if it is IE, if not then load the d3 script.

You can refer to the code below, it works well and clear d3 console error in IE 11:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        if (!(msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))) //If not IE, load d3 script
        {
            document.write('<script src="scripts/d3.js"><\/script>');
        } 
    </script>
</head>
<body>
    <svg>
        <circle class="target" style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle>
    </svg>
    <script>
        if (window.d3) {
            d3.select(".target").style("stroke-width", 8);
        }
        else {
            alert("IE");
        }
    </script>
</body>
</html>

Skip inclusion of d3.js for Internet Explorer

1 Answers1