6

我正在评估Fabric.js作为 Raphael.js 的替代品，用于创建与不支持 SVG 或画布的 IE8 兼容的交互式可视化（不幸的是，IE8 支持是不可协商的）。

可以通过桥接库 D34Raphael 使 Raphael 与可视化库D3.js一起工作- 它输出 SVG 并且与 IE8 不兼容 - 桥接库D34Raphael是适用于 Raphael 的 D3 的一个分支。D34Raphael 调整了一些（但不是全部）D3 特性以输出到 Raphael 的抽象对象而不是 DOM，因此，在 IE8 上，Raphael 可以将 D3 的输出解释为 VML。

（编辑 2014 年 2 月 - D34Raphael 现在似乎已经死了，但有一个名字很赞的替代R2D3似乎正在积极开发中）

Fabric 可以在 IE8 上输出 Canvas（使用excanvas转换为 VML），并且可以将 SVG 转换为交互式 Canvas 元素。因此，理论上 Fabric 似乎有可能取代 Raphael 桥接 D3 和 IE8。这样做会带来额外的灵活性，同时支持 Canvas 功能和 SVG。

我没有找到任何与 D34Raphael 等效的 Fabric - 我能找到的最接近的是这个在 IE8 中不起作用的演示页面。

从我在 Fabric 文档中看到的情况来看，可以为 Fabric 尝试类似 D34Raphael 的东西：它支持转换 SVG 路径、圆形、多边形、折线、椭圆、矩形、线条和图像元素，并且可以处理抽象对象允许持续的交互。比较 Fabric 处理矢量路径的性能与 Raphael 处理相同的性能的基准令人印象深刻（尽管没有给出涉及交互或动画的比较基准）。

以几个典型的 D3 项目为例：

我敢肯定我不是第一个对此进行调查的人。我不太喜欢尝试实现这样的东西的想法，只是发现有一些不可避免的问题，任何对 Fabric、Canvas 和/或 D3 更有经验的人都可以从一开始就指出。

  • 是否有任何现有项目允许使用 fabric.js 呈现 D3 输出，类似于 D34Raphael？
  • 有什么关于 D3 如何与 SVG 一起工作的内容无法通过 Fabric 的 SVG 到 Canvas 转换和对象模型进行传输？
  • 有没有比 D34Raphael 分叉 D3 项目并调整其输出的方法更简单的方法通过 Fabric 推送 D3 输出？

我尝试过的：我已经研究过的一些问题：

  • Fabric 会遇到与 D34Raphael 类似的问题，因为它在适应 D3 的 DOM 查询工具方面的能力非常有限（因为它适用于抽象对象，而不是 DOM 元素）——但这是可以通过组织良好的对象结构来解决的问题。
  • Raphael 和 Fabric 都在 IE8 中使用 VML，但是通过不同的引擎，因此 Raphael 和 Fabric 的 excanvas 设法在 VML 中实现的功能可能存在差异。到目前为止，在我的测试中，两者在 IE8 中的动画和交互性能都很差，但功能似乎相当，而且 Fabric在 IE8 中呈现 VML 文本似乎比 Raphael 好得多。
  • Fabric 对从 SVG 转换的形状的性能似乎很棒，并且似乎基于 D3 的重绘、交互性和动画应该是平滑的，因为这些需要与初始绘制类似的过程（但这里可能有一些我没有想到的东西）。
  • 看起来 Fabric 的组更像是 D3 使用的原生 SVG 组，而不是 Raphael 的组（但我可能在这里忽略了一些东西）。
4

1 回答 1

13

免责声明：我是 Fabric.js 的作者

非常有趣的问题。为了解决您的观点：

是否有任何现有项目允许使用 fabric.js 呈现 D3 输出，类似于 D34Raphael？

从来没听说过。但据我所知，D3.js 有 SVG 输出。而且 Fabric 具有 SVG 解析器，因此将 D3 的标记提供给 Fabric 进行渲染似乎非常简单。

有什么关于 D3 如何与 SVG 一起工作的内容无法通过 Fabric 的 SVG 到 Canvas 转换和对象模型进行传输？

我对 D3 不是很熟悉，但是查看您链接到的示例之一，我确实看到了一些兼容性问题。我复制了“力有向图”的整个 SVG 标记并将其加载到厨房水槽中

在此处输入图像描述

圆圈被正确渲染，但线条有些不对劲。奇怪的是，所有的行都被正确解析并加载到画布上。但它们是不可见的。为什么？因为它们在 D3.js 中的样式是通过“.line”类定义的，并且我们不支持 Fabric 中的样式表解析。

.link {
  stroke: #999;
  stroke-opacity: .6;
}

如果我们将这些样式“展开”到每一行（通过“stroke”和“stroke-opacity”属性或style="stroke: ...; stroke-opacity: ...;"），它将按预期工作.

我想圆圈周围的白色轮廓的问题有相同的根源。

有没有比 D34Raphael 分叉 D3 项目并调整其输出的方法更简单的方法通过 Fabric 推送 D3 输出？

实在想不出什么。

于 2013-08-01T12:39:53.803 回答