通过fabric.js推送D3.js输出以获得IE8支持？

时间：2013-07-23 18:13:45

标签： d3.js raphael fabricjs

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

拉斐尔可以使用可视化库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可以在桥接D3和IE8中取代Raphael。这样做会增加灵活性，同时支持Canvas功能以及SVG。

我没有发现任何与D34Raphael等同的Fabric - 我能找到的is this demo page最接近IE8无效。

根据我在Fabric文档中看到的内容，看起来像D34Raphael可以尝试使用Fabric：它支持转换SVG路径，圆形，多边形，折线，椭圆，矩形，线条和图像元素，并使用抽象的对象，允许持续的交互性。 benchmarks comparing performance of Fabric handling vector paths compared to Raphael handling the same令人印象深刻（尽管没有给出涉及交互或动画的比较基准）。

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

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

  • 是否有任何现有项目允许使用fabric.js渲染D3输出，类似于D34Raphael？
  • 有什么关于D3如何与SVG一起使用，而这些SVG无法通过Fabric的SVG传输到Canvas转换和对象模型？
  • 有没有更简单的方法来推动D3输出通过Fabric而不是D34Raphael方法分支D3项目并调整其输出？

我尝试了什么：我已经考虑过的一些问题：

  • Fabric将遇到与D34Raphael类似的问题，因为它在调整D3的DOM查询工具方面的能力非常有限（因为它适用于抽象的对象，而不是DOM元素） - 但这可以解决用一个组织良好的对象结构来解决。
  • Raphael和Fabric都在IE8中使用VML，但是通过不同的引擎，所以Raphael和Fabric的excanvas在VML中设法实现的功能可能会有所不同。到目前为止，在我的测试中，IE8中的动画和交互性能都很差，但功能似乎相当，而Fabric似乎比Raphael更好rendering VML text in IE8。
  • 使用从SVG转换的形状的Fabric的性能看起来很棒，似乎基于D3的重绘，交互性和动画应该是平滑的，因为这些需要与初始绘制类似的过程（但可能有一些我和＃ 39;没想到这里。）
  • 看来，Fabric的团队更像是D3工作的原生SVG团队，而不是拉斐尔的团队（但我可能在这里忽略了一些东西）。

1 个答案:

答案 0 :(得分：13)

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

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

  

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

不是我知道的。但从我所看到的，D3.js有SVG输出。而Fabric有SVG解析器，所以将D3的标记提供给Fabric进行渲染似乎非常简单。

  

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

我对D3并不熟悉，但是看一下你链接到的一个例子，我确实看到了一些兼容性问题。我复制了“强制有向图”的整个SVG标记并将其加载到kitchensink

中

enter image description here

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

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

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

我认为围绕圆圈的白色轮廓的问题具有相同的根源。

  

有没有更简单的方法来推动D3输出通过Fabric而不是D34Raphael方法分支D3项目并调整其输出？

无法想到任何事情。

相关问题
最新问题