通过fabric.js推送D3.js输出以获得IE8支持？
use*_*ca8 6 raphael d3.js fabricjs
我评价一个Fabric.js作为替代Raphael.js一种创建交互式可视化是与IE8,它不支持SVG或帆布兼容(IE8的支持是不可转让的不幸).
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可以在桥接D3和IE8中取代Raphael.这样做会增加灵活性,同时支持Canvas功能和SVG.
我没有找到任何与D34Raphael等效的Fabric - 我能找到的最接近的是这个在IE8中不起作用的演示页面.
从我所见的Fabric文档来看,它看起来像D34Raphael可以尝试Fabric:它支持转换SVG路径,圆形,多边形,折线,椭圆,矩形,线条和图像元素,并使用抽象对象这允许持续的交互性.比较Fabric处理矢量路径的性能与Raphael处理相同性能的基准令人印象深刻(尽管没有给出涉及交互或动画的比较基准).
以几个典型的D3项目为例:
我敢肯定,我不是第一个对此进行调查的人.我不太喜欢尝试实现类似的东西,只是发现有一些不可避免的问题,任何更有经验的Fabric,Canvas和/或D3都可以从一开始就指出.
- 是否有任何现有的项目允许使用fabric.js渲染D3输出,类似于D34Raphael？
- 有没有关于D3如何与SVG一起工作的东西,简单地无法通过Fabric的SVG传输到Canvas转换和对象模型？
- 有没有更简单的方法来推动D3输出通过Fabric而不是D34Raphael方法分支D3项目并调整其输出？
我尝试过的:我已经研究过的一些问题:
- Fabric会遇到与D34Raphael类似的问题,因为它在调整D3的DOM查询工具方面非常有限(因为它适用于抽象的对象,而不是DOM元素) - 但这可以通过组织良好的对象结构来解决.
- Raphael和Fabric都在IE8中使用VML,但是通过不同的引擎,所以Raphael和Fabric的excanvas在VML中实现的功能可能会有所不同.到目前为止,在我的测试中,IE8中的动画和交互性能都很差,但功能似乎相当,而Fabric似乎比Raphael 在IE8中渲染VML文本要好得多.
- 使用从SVG转换的形状的Fabric的性能似乎很好,并且看起来好像基于D3的重绘,交互性和动画应该是平滑的,因为这些需要与初始绘制类似的过程(但是可能有一些我在这里没有想到的).
- 似乎Fabric的团队更像是D3工作的原生SVG团队而不是拉斐尔的团队(但我可能忽略了这里的东西).
kan*_*gax 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:...;")它将按预期工作.
我想围绕圆圈的白色轮廓的问题具有相同的根源.
有没有更简单的方法来推动D3输出通过Fabric而不是D34Raphael方法分支D3项目并调整其输出？
想不出什么真的.