Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

usable D3 replacement in IE8 (graphs with D3 and svg)

I have developed working D3 driven charts and as far as all the other browsers go, there are no problems.

but recently the need to support them also in Internet Explorer 8 cropped up.

But so far i can't make this html display in IE8.

these are the tags used in D3:

<svg> <path> <g> <line> <circle> <rect>

for the last 6 hours i have skimmed through a lot of materials and questions including:

"Display inline SVG in IE8" which has this answer from October 2012:

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.

Also:

D3 IE8 Compatibility?

wikipedia.org/wiki/Scalable_Vector_Graphics

SVG Web Compatibility

But the solutions using client-side plugins are not acceptable and so far it looks that i can't display svg in IE8. So the solution is to find some other ways to render vector graphs. I presume that others have had the same problems


Edit:

either way, people that will encounter this same problem after me will at least have somewhat concentrated materials and will realize that there is no easy/real solution to display svg on IE8 and better to spend time starting on the existing code rewriting/adjusting for non-svg version

Edit:

after some testing i would say that its worth trying to go through R2D3 examples and see if its possible to simplify/execute the code in IE8

Samples

Edit:

During the process of testing different elements separately some r2d3 problems seem to arise

most common would be Invalid argument and Object doesn't support this property or method

as i am not used to develop for IE8 there were some useful tips that i found:

dump javascript vars and display objects

like image 811
kitaps Avatar asked Jan 29 '14 14:01

kitaps


1 Answers

Not sure if you are still looking for an answer, but I ran into this issue on a project a few years back. We ended up switching over to HighCharts for the browser compatibility. At the time it was still in its infancy as a charting library, since then it's become much more powerful and still maintains browser support back to IE6.

like image 58
morsecodemedia Avatar answered Nov 16 '22 04:11

morsecodemedia