Getting d3.js to work with raphael.js

Question

I have recently implemented some data visualisation using d3.js, I'm now trying to get this to work for Internet Explorer browser versions 7 and above. The common suggestion to get this to work, is to combine d3.js with raphael.js, which is a cross browser graphics library.

There already seem to be some implementations of such libraries such as r2d3.js : d34raphael.js :

I'm trying to understand if these existing implementation already have d3's capability of data binding and the physics implementation of the force layout to implement something as simple as this d3 example : http://bl.ocks.org/1095795

Answer 1

I have been looking into this too and a number of options came up.

• Chrome Frame - A browser plug-in that actually uses chrome underneath, meaning SVG just works. This is great if you're able to deploy plugins to the browser, for a real commercial environment however this may not be possible.

• SVG Web - The aim is it bring SVG to all browsers. It looks like a fairly large project, one that's had Google's input. This doesn't however work out of the box with D3 though I don't know much about the issues.

• D34Raphael - You've mentioned this one, I found again it doesn't work out of the box. Check the project out on GitHub, there hasn't been any commit activity in months and there's some pull requests "first pass on trying to get support for .on() required for event binding". If it doesn't support events, is that an issue to you? I'd generally keep away from this one.

• R2D3 - Again another one you mentioned. I took the Sankey example from the D3 website and had to make a few changes to get it working. The main things I couldn't get working (Drag Events, Groups - though can use an alternative). It took about a day of effort to get the example working in IE8 and I believe is in a useable state. The project on GitHub is also much more active, the developer is committing, pulling work in and is very active on discussions etc. This gets my vote.