SCRIPT87: Invalid argument.
d3.v2.js, line 10 character 5
Line looks like this:
d3_style_setProperty.call(this, name, value + "", priority);
^
lines 4..12 in d3.v2.js
try {
document.createElement("div").style.setProperty("opacity", 0, "");
} catch (error) {
var d3_style_prototype = 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);
};
}
The page I'm loading that causes the error:
http://lab.dev.concord.org/examples/simple-atoms-model-embeddable/simple-atoms-model.html
The html starts with: <!DOCTYPE html>
IE9 reports the Document Mode as "IE9 Standards"
This d3 example works fine on my IE9:
http://mbostock.github.com/d3/ex/population.html
The d3.v2.js it's pulling is from here:
$ curl -I http://mbostock.github.com/d3/d3.v2.js?2.8.1
HTTP/1.1 200 OK
Server: nginx/1.0.13
Date: Sun, 18 Mar 2012 06:52:57 GMT
Content-Type: application/x-javascript
Content-Length: 253776
Last-Modified: Fri, 16 Mar 2012 17:25:52 GMT
Connection: keep-alive
Expires: Mon, 19 Mar 2012 06:52:57 GMT
Cache-Control: max-age=86400
Accept-Ranges: bytes
Looks quite similar to this d3.v2.js I'm pulling from my server:
$ curl -I http://lab.dev.concord.org/vendor/d3/d3.v2.js
HTTP/1.1 200 OK
Date: Sun, 18 Mar 2012 06:52:07 GMT
Server: Apache/2.2.3 (Red Hat)
Last-Modified: Sun, 18 Mar 2012 06:25:26 GMT
ETag: "131c050-3df50-81df2180"
Accept-Ranges: bytes
Content-Length: 253776
Vary: Accept-Encoding
Content-Type: application/x-javascript
http://lab.dev.concord.org/examples/surface-temperature/surface-temperature.html
It seems perhaps like perhaps some other problem is causing IE9 to report an error in D3 ...?
Probably just need to add brackets, ie(value + "") in d3_style_setProperty.call(this, name, value + "", priority);
Mike
this.dom_element.style("height", this.height);
Here this.height is an integer; when you set the height property in
CSS, you need to specify units, so it should say:
this.dom_element.style("height", this.height + "px");
Mike
this.dom_element.style("border", "1px solid black;");
Also, it's generally easier to set styles like this via classes rather
than setting them directly.
Mike
Thanks so much for the suggestions. I fixed both problems and the first three molecular modeling simulations now workin IE9
When I get back I'll look at what the error is on this page:
http://lab.dev.concord.org/examples/complex-atoms-model/complex-atoms-model.html
But understanding more about where to look when IE9 gives me that kind of error is quite helpful.
FYI: here were the the commits
https://github.com/concord-consortium/lab/compare/deb1f754c...82563a8a
This was the problem:
IE9: SVG text-anchor uses: "start, "middle", and "end"
... not "left" and "right"
see: http://www.w3.org/TR/SVG/text.html#AlignmentProperties
And one more problem -- another developer had a console.log output statement and IE9 doesn't seem to have that defined if the Developer Tools are not opened.
Here were all the changes I needed to make to get the visualization working on IE9:
https://github.com/concord-consortium/lab/compare/deb1f754c...8e37b0c54b