D3.JS Browser Support

问题:

Could a developer with experience of D3.JS indicate what specific browsers and browser version levels in practice most readily support the D3.JS library ?

Is there a list of D3.JS 'components' which are known not to be compatible with specific browsers and browser version levels?

The D3.JS website suggests :

Browser Support

D3 supports so-called “modern” browsers, which generally means everything except IE8 and below. D3 is tested against Firefox, Chrome (Chromium), Safari (WebKit), Opera and IE9. Parts of D3 may work in older browsers, as the core D3 library has minimal requirements: JavaScript and the W3C DOM API. For IE8, the compatibility library Aight is recommended. D3 uses the Selectors API Level 1, but you can preload Sizzle for compatibility. You'll need a modern browser to use SVG and CSS3 Transitions. D3 is not a compatibility layer, so if your browser doesn't support standards, you're out of luck. Sorry!"

However, I was hoping for a more specific answer.

回答1:

I'm going to go out on a limb here and equate SVG support with D3 support, since (in my opinion) that's the most useful part of the library.

With that in mind, this link should give you the exact browser versions that support it: http://caniuse.com/svg

And this matches what you pasted from the D3 site: basically every major browser vendor except IE has had SVG support for many many versions.

Your question says "in practice" and that means SVG. Yes, I know there are some samples of using D3 with the non-SVG parts of the DOM, but the vast majority of the examples in the gallery are SVG-based.

回答2:

D3 is a library for data manipulations with a lot of helper tools for data visualizations using SVG and Canvas.

D3 is designed to give you direct access to all underlying features of HTML and SVG. This means, cross-browser compatibility is limited by the elements and attributes your code uses rather than D3 itself.

Here are some examples for HTML5 and CSS3:

// Requires HTML5
d3.select('body').append('nav');

// Requires CSS3 transformations
d3.select('div').style('transform', 'matrix(1, -0.3, 0, 1, 0, 0)');

and one for SVG and SMIL:

// Requires SMIL
d3.select('rect').append('animate')
   .attr('attributeName', 'x')
   .attr('from', 10)
   .attr('to', 50);

and one for Canvas:

// Requires Canvas
d3.select('body').append('canvas');

If we consider only the D3 framework itself (for example to use only the geo projection functions, but no DOM elements etc.), cross-browser compatibility is limited by the browser support of ECMAScript 5 due to the heavy use of map, forEach, etc.