15

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

Community
  • 1
  • 1
kitaps
  • 243
  • 4
  • 10
  • 1
    It looks like you've done a lot of research into this already -- what else are you looking for? There's no simple answer. – Lars Kotthoff Jan 29 '14 at 15:15
  • as much as i would like somebody to provide encouraging examples/materials that there is actually a library that is capable to implement html5 on IE8 i guess there isn't. so i would probably need confirmation that there is no other way and i have to rewrite the javascript code just to do cater IE8. and of course keep supporting these code duplications... – kitaps Jan 29 '14 at 15:36
  • 1
    Depending on your visualization, you may be able to make it work with HTML elements. But otherwise the Raphael project is the most complete version for adapting SVG and d3 to IE8. If you didn't need interactivity, there would be other options, like rendering the graphic on the server and converting it to .png. – AmeliaBR Jan 29 '14 at 19:24
  • 2
    Also, the idea of R2D3 is that it acts as a translator/shim/polyfill between your standard d3 code and IE 7/8. So you shouldn't have to worry about code duplication. You'll only have one version of your script, but IE conditional comments pass the R2D3 library instead of the regular D3 library. However, you will probably have to do a one-time re-write to avoid some of the SVG features that R2D3 currently isn't able to convert. – AmeliaBR Jan 29 '14 at 22:56
  • We use r2d3 extensively to support both ie7 and 8 at work. The developer has just recently started giving the library more attention so I would hazard a guess that this is the best bet you have for supporting ie8. Just thank your lucky stars that you don't have to cover ie7. – arete Jan 30 '14 at 00:47
  • You can do it!!!1 I have no experience with Data-Driven Documents whatsoever, but I would guess R2D3 is worth a try. It gives _some_ results almost out of the box (screenshot http://s18.postimg.org/8wxzs70ah/drie8sample.png, IE8's HTML: http://www.fileswap.com/dl/fJhvhyOCRB/). One thing you'll apparently need to redo yourself though is styling elements using CSS as VML doesn't yield to CSS as SVG does. – Jānis Elmeris Feb 01 '14 at 16:42
  • D3 is a simple and powerfull library but it do not offer a compatiblity svg layer. Use a library like raphael to provide compatiblity between browsers, since this is only a ie8 issue also consider dropping support to this old browser. – David Lemon Jul 06 '17 at 07:04

3 Answers3

1

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.

morsecodemedia
  • 317
  • 2
  • 8
0

IE8 (as far as I can see) simply doesn't support SVG. The only solution I can see working is using a different graph library which uses a canvas to draw it's components. Think of libraries like CanvasJS, ChartsJS, GoJS or VisJS Network Graphs and then using excanvas to make them work for IE8.

Another solution I found when researching this topic is using Chrome Frame. It makes IE8 support SVG. Though, sadly, Chrome Frame is retired and no longer supported anymore.

Knowing all this you have to ask yourself: "Is it worth going through all of this for the less than 0,1% of people who still use IE8 and below?".

Because, if you want complete d3 compatibility you probably would have to write your own converter from svg to canvas and even then, you still have to hope that excanvas supports all the canvas functions you write.

Edit: Changed browser percentage to current IE8 usage

Luud Janssen
  • 362
  • 1
  • 3
  • 12
0

Unfortunately for most people now supporting IE8 its down to client restrictions rather than consumers.

Without informing those that have requested it of the restraints, backwards compatibility and cost implications along with valued links from this post, the solutions for making canvas work in IE7/8 and using the JScharts variants is your best option.

Of course, it means not using D3 unless you want to double your work load = cost. Just remember to mention that every time.

Good luck

Jason Merry
  • 16
  • 2