IE8 中可用的 D3 替换（带有 D3 和 svg 的图表）答案

【问题标题】：usable D3 replacement in IE8 (graphs with D3 and svg)IE8 中可用的 D3 替换（带有 D3 和 svg 的图表）
【发布时间】：2014-02-21 11:09:15
【问题描述】：

我已经开发了工作 D3 驱动的图表，就所有其他浏览器而言，没有问题。

但最近出现了在 Internet Explorer 8 中也支持它们的需求。

但目前我无法在 IE8 中显示这个 html。

这些是 D3 中使用的标签：

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

在过去的 6 个小时里，我浏览了很多材料和问题，包括：

“Display inline SVG in IE8”从 2012 年 10 月开始具有 this answer：

我也一直在研究这个问题，并提出了许多选择。

Chrome Frame - 一个实际上在底层使用 chrome 的浏览器插件，这意味着 SVG 可以正常工作。如果您能够将插件部署到浏览器，那就太好了，但对于真正的商业环境，这可能是不可能的。

SVG Web - 目标是将 SVG 引入所有浏览器。它看起来是一个相当大的项目，有谷歌的意见。但是，尽管我对这些问题知之甚少，但这并不适用于 D3。

D34Raphael - 你提到了这个，我又发现它不能开箱即用。在 GitHub 上查看该项目，几个月来没有任何提交活动，并且有一些拉取请求“首先尝试获得对事件绑定所需的 .on() 的支持”。如果它不支持事件，那对您来说是个问题吗？我通常会远离这个。

R2D3 - 又是你提到的另一个。我从 D3 网站上获取了 Sankey 示例，并且必须进行一些更改才能使其正常工作。我无法工作的主要事情（拖动事件，组 - 虽然可以使用替代方案）。花了大约一天的时间让示例在 IE8 中运行，我相信它处于可用状态。 GitHub 上的项目也更加活跃，开发人员正在提交、投入工作并非常积极地参与讨论等。这得到了我的投票。

还有：

D3 IE8 Compatibility?

wikipedia.org/wiki/Scalable_Vector_Graphics

SVG Web Compatibility

但是使用客户端插件的解决方案是不可接受的，目前看来我无法在 IE8 中显示 svg。所以解决的办法就是找一些其他的方法来渲染矢量图。我想其他人也有同样的问题

编辑：

不管怎样，在我之后遇到同样问题的人至少会有一些集中的材料，并且会意识到在 IE8 上显示 svg 没有简单/真正的解决方案，最好花时间从现有的非svg版本的代码重写/调整

编辑：

经过一些测试，我会说它值得尝试通过 R2D3 示例，看看是否可以简化/执行 IE8 中的代码

Samples

编辑：

在分别测试不同元素的过程中，似乎出现了一些 r2d3 问题

最常见的是Invalid argument 和Object doesn't support this property or method

因为我不习惯为 IE8 开发，所以我发现了一些有用的提示：

dump javascript vars 和 display objects

【问题讨论】：

看起来您已经对此进行了大量研究——您还在寻找什么？没有简单的答案。
尽管我希望有人提供令人鼓舞的示例/材料，但实际上有一个库能够在 IE8 上实现 html5，我想没有。所以我可能需要确认没有其他方法，我必须重写 javascript 代码只是为了迎合 IE8。当然还要继续支持这些代码重复...
根据您的可视化，您也许可以使其与 HTML 元素一起使用。但除此之外，Raphael 项目是使 SVG 和 d3 适应 IE8 的最完整版本。如果您不需要交互性，还有其他选项，例如在服务器上渲染图形并将其转换为 .png。
另外，R2D3 的想法是它充当标准 d3 代码和 IE 7/8 之间的翻译器/shim/polyfill。因此，您不必担心代码重复。您将只有一个版本的脚本，但 IE 条件 cmets 通过 R2D3 库而不是常规 D3 库。但是，您可能需要一次性重写，以避免 R2D3 目前无法转换的一些 SVG 功能。
我们广泛使用 r2d3 来支持工作中的 ie7 和 8。开发人员最近才开始给予该库更多的关注，所以我猜测这是支持 ie8 的最佳选择。只是感谢你的幸运星，你不必覆盖 ie7。

标签： html svg internet-explorer-8 d3.js shim

【解决方案1】：

不确定您是否仍在寻找答案，但几年前我在一个项目中遇到了这个问题。为了浏览器的兼容性，我们最终切换到HighCharts。当时它作为一个图表库还处于起步阶段，从那时起它变得更加强大，并且仍然保持对 IE6 的浏览器支持。

【讨论】：

【解决方案2】：

不幸的是，对于现在支持 IE8 的大多数人来说，这取决于客户端限制，而不是消费者。

如果不将限制、向后兼容性和成本影响以及本文中的有价值链接告知那些请求它的人，使画布在 IE7/8 中工作并使用 JScharts 变体的解决方案是您的最佳选择。

当然，这意味着不使用 D3，除非您想将工作量翻倍 = 成本。只要记得每次都提到这一点。

祝你好运

【讨论】：

【解决方案3】：

IE8（据我所知）simply doesn't support SVG。我能看到的唯一解决方案是使用不同的图形库，它使用画布来绘制它的组件。想想像 CanvasJS、ChartsJS、GoJS 或 VisJS Network Graphs 这样的库，然后使用 excanvas 使它们适用于 IE8。

我在研究这个主题时发现的另一个解决方案是使用 Chrome Frame。它使 IE8 支持 SVG。不过，很遗憾，Chrome Frame is retired and no longer supported anymore。

了解这一切后，您必须问自己：“为less than 0,1% of people who still use IE8 and below 经历所有这些是否值得？”。

因为，如果您想要完全兼容 d3，您可能必须编写自己的从 svg 到 canvas 的转换器，即便如此，您仍然必须希望 excanvas 支持您编写的所有 canvas 功能。

编辑：将浏览器百分比更改为当前 IE8 使用率

【讨论】：

该链接现在表明“IE9 及以下”为 0.2%，这可能意味着 IE8 低于 0.1%。