IE10 d3.v3.js error: Unable to get property 'prototype' of undefined or null reference

My page is loading perfectly in IE9, Safari, Chrome & Firefox.

But when it coems to IE10 , it throws error : Unable to get property 'prototype' of undefined or null reference in d3.v3.js at line : d3_window.CSSStyleDeclaration.prototype.

 try {
    d3_document.createElement("div").style.setProperty("opacity", 0, "");
  } catch (error) {
    var d3_style_prototype = d3_window.CSSStyleDeclaration.prototype, d3_style_setProperty = d3_style_prototype.setProperty;
    d3_style_prototype.setProperty = function(name, value, priority) {
      d3_style_setProperty.call(this, name, value + "", priority);
    };
  }

I am not getting what exactly is being done here.

In try block even though setProperty method we can see in debugger on d3_document.createElement("div").style it is throwing error as : Object doesn't support property or method 'setProperty'

In catch block it tries to access prototype of window's CSSStyleDeclaration , but that is undefined.

Anybody occured with same problem while using d3.v3.js

This can be fixed with a DOCTYPE:

<!DOCTYPE html>

And a meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Without those, IE will go into quirks mode and not understand what CSSStyleDeclaration is.

Had same problem which used to happen randomly, after some research i concluded that it's setting invalid css properties ( from IE point of view ) that caused it, in my case: someSvg.append('svg:text') .text(function (d) { return d.label; }) .attr('text-anchor', 'left')

Where it should have been

.attr('text-anchor', 'start')

So my advice would be to review all from-scritpt-stylings, or even better - move them to css completely. After such fix it should work like charm in IE9+

It looks like this is a known issue and unlikely to get fixed.

https://groups.google.com/forum/?fromgroups=#!topic/d3-js/8lQ2BCR45BM

The work-around is to load d3 selectively - this works for me -

// load d3.js selectively
try { 
            // if this doesnt throw an error then we can load d3.js 
            // this is known to fail in IE < 8
            document.createElement("div").style.setProperty("opacity", 0, "")

            var d3Script = document.createElement( "script" )

            d3Script.src = "@Href("~/JavaScript/d3.js")"

            d3Script.onload = function (){
                // do stuff
            }

            document.getElementsByTagName("head")[0].appendChild( d3Script )
} catch( error ) {
            // upgrade your browser
}

来源：https://stackoverflow.com/questions/15196622/ie10-d3-v3-js-error-unable-to-get-property-prototype-of-undefined-or-null-ref

标签

d3.js

internet-explorer-10