D3.JS 浏览器支持答案

【问题标题】：D3.JS Browser SupportD3.JS 浏览器支持
【发布时间】：2013-03-01 13:32:08
【问题描述】：

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

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

D3.JS 网站建议：

Browser Support

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 不是兼容层，因此如果您的浏览器不支持标准，那么您就不走运了。对不起！”

不过，我希望得到更具体的答案。

【问题讨论】：

标签： browser cross-browser d3.js

【解决方案1】：

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

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

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

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

【讨论】：

在没有 SVG 的情况下使用 D3 真的很简单。 D3 在旧 IE 浏览器中中断的原因有多种。
peter，你能分享一些如何在没有 SVG 的情况下使用 D3 的链接/示例吗？
javascript .map 方法（不支持
不是必须的SVG，比如我用一个DIV创建了一个动态条形图，由进入、更新、退出模式组成。工作得很好。

【解决方案2】：

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 元素等），由于大量使用map、forEach等

【讨论】：

这是一个很好的答案。