42

具有 D3.JS 经验的开发人员能否指出在实践中哪些特定浏览器和浏览器版本级别最容易支持 D3.JS 库？

是否有已知与特定浏览器和浏览器版本级别不兼容的 D3.JS“组件”列表？

D3.JS 网站建议：

浏览器支持

D3 支持所谓的“现代”浏览器，这通常意味着除 IE8 及以下之外的所有浏览器。D3 针对 Firefox、Chrome (Chromium)、Safari (WebKit)、Opera 和 IE9 进行了测试。D3 的某些部分可能在较旧的浏览器中工作，因为核心 D3 库具有最低要求：JavaScript 和 W3C DOM API。对于 IE8，推荐使用兼容库 Aight。D3 使用 Selectors API Level 1，但您可以预加载 Sizzle 以实现兼容性。您需要一个现代浏览器来使用 SVG 和 CSS3 过渡。D3 不是兼容层，因此如果您的浏览器不支持标准，那么您就不走运了。对不起！”

但是，我希望得到更具体的答案。

4

2 回答 2

27

我将在这里竭尽全力将 SVG 支持与 D3 支持等同起来，因为（在我看来）这是库中最有用的部分。

考虑到这一点，此链接应该为您提供支持它的确切浏览器版本：http: //caniuse.com/svg

这与您从 D3 站点粘贴的内容相符：基本上除了 IE 之外的所有主要浏览器供应商都支持许多版本的 SVG。

您的问题是“在实践中”，这意味着 SVG。是的，我知道有一些将 D3 与 DOM 的非 SVG 部分一起使用的示例，但是库中的绝大多数示例都是基于 SVG 的。

于 2013-03-01T18:03:15.100 回答
6

D3 是一个用于数据操作的库，其中包含许多使用 SVG 和 Canvas 进行数据可视化的辅助工具。

D3 旨在让您直接访问 HTML 和 SVG 的所有底层功能。这意味着，跨浏览器兼容性受到代码使用的元素和属性的限制，而不是 D3 本身。

以下是HTML5和CSS3的一些示例：

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

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

一个用于SVG和SMIL：

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

一个用于Canvas：

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

如果我们只考虑 D3 框架本身（例如只使用地理投影功能，而不使用 DOM 元素等），跨浏览器兼容性会受到ECMAScript 5浏览器支持的限制，因为大量使用map,forEach等。

于 2016-01-03T21:50:20.607 回答