IE9 error loading v2.8.1 of d2.v2.js

瀏覽次數:756 次
跳到第一則未讀訊息

Stephen Bannasch

未讀,
2012年3月18日 凌晨2:47:102012/3/18
收件者:d3...@googlegroups.com
I'm getting this error trying to load d3.v2.js v2.8.1 in IE9 on Win7 running in VirtualBox:

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"

Stephen Bannasch

未讀,
2012年3月18日 凌晨2:57:022012/3/18
收件者:d3...@googlegroups.com


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

Stephen Bannasch

未讀,
2012年3月18日 凌晨3:10:212012/3/18
收件者:d3...@googlegroups.com
And one more strange clue ... other simpler programs I am hosting that use the SAME version of d3.v2.js work ok in IE9:

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 ...?

Thug

未讀,
2012年3月18日 凌晨4:43:092012/3/18
收件者:d3...@googlegroups.com

Probably just need to add brackets, ie(value + "") in  d3_style_setProperty.call(this, name, value + "", priority);

 

Mike Bostock

未讀,
2012年3月18日 上午10:04:182012/3/18
收件者:d3...@googlegroups.com
Can you use a debugger and figure out which argument (and value) it
says are invalid? It sounds like you may be inadvertently passing an
invalid name, value or priority to the style operator.

Mike

Mike Bostock

未讀,
2012年3月18日 上午10:07:532012/3/18
收件者:d3...@googlegroups.com
This probably isn't it, but here's one bug I noticed:

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

Mike Bostock

未讀,
2012年3月18日 上午10:08:572012/3/18
收件者:d3...@googlegroups.com
Another another one here; there should be no trailing semicolon when
setting style properties:

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

Stephen Bannasch

未讀,
2012年3月18日 上午10:39:262012/3/18
收件者:d3...@googlegroups.com

Thanks so much for the suggestions. I fixed both problems and the first three molecular modeling simulations now workin IE9

http://lab.dev.concord.org

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

Stephen Bannasch

未讀,
2012年3月18日 晚上11:11:552012/3/18
收件者:d3...@googlegroups.com
At 10:39 AM -0400 3/18/12, Stephen Bannasch wrote:
>At 7:08 AM -0700 3/18/12, Mike Bostock wrote:
>>Another another one here; there should be no trailing semicolon when
>>setting style properties:
>>
>> 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.
>
>Thanks so much for the suggestions. I fixed both problems and the first three molecular modeling simulations now workin IE9
>
> http://lab.dev.concord.org
>
>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

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


Igor Shchukin

未讀,
2015年7月27日 清晨5:41:392015/7/27
收件者:d3-js、mbos...@cs.stanford.edu
Thanks a lot of the hint, Mike. 

Same problem appears when you set the font-size without "px".  
回覆所有人
回覆作者
轉寄
0 則新訊息