Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Is D3 compatible with IE7 and IE8? #619

Closed
victorbstan opened this Issue · 12 comments

5 participants

@victorbstan

I get these errors in IE9 running in IE8 mode

SCRIPT438: Object doesn't support property or method 'map'
d3.v2.js?1334930073, line 719 character 1

SCRIPT438: Object doesn't support property or method 'select'
charts.js?1334930073, line 48 character 2

@mhemesath

That depends on what parts of D3 you are using. A lot of D3 can be made compatible wiht IE7/8 by including Sizzle and an ECMAScript5 shim such as https://github.com/kriskowal/es5-shim

I've found it is very practical to use D3 to do the heavy lifting of handling the scales, generating path data for areas and lines, and formatting dates and using something such as Raphael to do the rendering. This approach isn't as clean as D3 as you can't use the selections API, but it allows you to easily create custom visualizations that work in IE with relative ease.

@mbostock mbostock closed this
@mhemesath

I went ahead and started a project containing some examples of using D3 and Raphael together for IE compatibility. It's far from complete, but hopefully this should give you a good starting point: https://github.com/mhemesath/r2d3

@victorbstan

Thanks, very enterprising of you ;)

@webmonarch

@mhemesath Thanks for the examples. I just sat down to figure out how to get d3 + raphael to play well together when I happened to find your post.

Also, great project name: r2d3.

It seems like there is a bit of momentum in the community around this recently. There is a lot of chatter the last few days.

@mhemesath

Thanks, I'm glad its helpful! I'm pretty excited it works and am hoping to convert as many D3 examples over to use Raphael as possible to provide a good example base for others. Using Raphael in replacement of the D3 selections API will never be as powerful as D3 alone, but at least it will enable a solution that is in the right direction. I'm hoping in a year or two r2d3 will be obsolete as SVG will be taken for granted as an available feature :p

@victorbstan

Cool stuff, great work, unfortunately, the 'enterprise' still exists...

@webmonarch

Here is my take on d3 + raphael interop. You can see the niceties @ http://webmonarch.github.com/d34raphael/. Code @ https://github.com/webmonarch/d3/tree/raphael-compat

Ultimately, I wanted the d3 + Raphael version to "feel" like the SVG version...and I think it now does! Take a look and let me know what you think.

@mhemesath

wow... awesome work! I was actually in the process of doing this myself, but may just stop now as it seems you beat me to it :p

I'll probably stop development on R2D3... and just work on implementing examples using your fork for others reference.

(Also, feel free to take the name R2D3 if you like it as I'll be ending my project anyway)

@webmonarch

@mhemesath Yeah, sorry to trample! I hope no hard feelings. I'm on a sabbatical, and this project really caught my interest. I've been hacking on it since our last comments.

Yeah, it was a hard decision on how to package things into GitHub projects. Because of the code changes, I knew I needed a fork of d3 to allow transparency and collaboration on the code, but I didn't want to use the fork as a place for issues and feature requests (since I didn't want it to be confused with upstream d3 work)...

So, admittedly less clever than r2d3...I went for a Java-esc naming convention (something 4 something else). In honor of your initial work, I am happy to migrate d34raphael to your r2d3 project. Ultimately, I wanted a clear place outside of d3 to showcase the raphael extension and r2d3 is equally good...only downside, I think there is an existing, completely unrelated r2d3 on GitHub already, and the r2d3 is a little "noisy" on google.

Either way, I hope we can collaborate and make Raphael support great. You're trick of using Raphael set transforms to simulate SVG group transforms are in the examples! :)

@mhemesath

No hard feelings at all! I was relieved someone built a Raphael Selections API so I didn't have to hahahaha. Ultimately my project was just showing how to use D3 with Raphael sans D3 selection APIs. Your hybrid of the two solutions is great, and definitely where I wanted this to go.

No need to migrate to R2D3. Also, if you don't like the fork, you could create a new project that includes D3 as a submodule. Then just create a custom makefile that builds a d3.js using the submodule plus your custom code. This might be a cleaner separation from D3 that lets easily rebuild with the latest code whenever you need. It would be nice for this to work in core D3, but a more realistic situation is that this will just be a 3rd party plugin for D3.

I'll definitely help build this up. I think for this to be successful we need to convert the core examples from D3 over to this implementation. We should also get documentation in place so implementors are aware this isn't an IE compatible version of D3.. but rather a subset of D3 with a Raphael selections API module.

@webmonarch

@mhemesath Sounds good. I will take a look at repackaging the plugin to be a JS file that sits along the stock d3.

RE: submodule, I actually have my d3/raphael-compat branch included as a submodule in d34raphael/gh-pages...so, it's easy to share the progress of the code and examples on the demo site. I have a feeling we'll eventually (like you suggested) have a custom build/deploy step that includes the build artifacts solo into the d34raphael project.

I'll start makes issues for all these things in d34r and we can move the convo from this issue. I'll also work to document the API and tweak the demo site a bit.

cheers.

@mtho11

@webmonarch This solution works for IE8 (8.0.7601.17514) on Windows 7 but the version of IE8 (8.0.6001.18702) on Windows XP is different and doesn't render properly. My IE8 error message: https://gist.github.com/3738417

Is this a known issue? Is there a solution to this?

Thanks. Other than this issue the solution looks great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.