推送D3.js输出通过fabric.js为IE8支持？ [英] Pushing D3.js output through fabric.js for IE8 support?

问题描述

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

I'm evaluating Fabric.js as an alternative to Raphael.js for creating interactive visualisations that are compatible with IE8, which doesn't support SVG or canvas (IE8 support is non-negotiable unfortunately).

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

Raphael can be made to work with the visualisation library D3.js - which outputs SVG and is incompatible with IE8 - via the bridging library D34Raphael, a fork of D3 adapted for use with Raphael. D34Raphael adapts some (but not all) D3 features to output into Raphael's abstracted objects instead of the DOM, so that, on IE8, Raphael can interpret D3's output as VML.

（编辑2014年2月 - D34Raphael似乎已经死了，但有一个非常好的命名的替代 R2D3

Fabric可以在IE8上输出Canvas（使用 /excanvas.sourceforge.net/rel =nofollow> excanvas 转换为VML），并可以将SVG转换为交互式Canvas元素。因此，在理论上似乎可能的是，Fabric可以替换Raphael在桥接D3和IE8。这样做将带来更多的灵活性，也支持Canvas功能以及SVG。

Fabric can output Canvas on IE8 (using excanvas to convert to VML), and can convert SVG to interactive Canvas elements. So, it seems theoretically possible that Fabric could replace Raphael in bridging D3 and IE8. Doing so would bring the added flexibility of also supporting Canvas functionality as well as SVG.

相当于D34Raphael - 最近的我可以找到这个演示页，不工作在IE8。

I've not found any Fabric equivalent to D34Raphael - the closest I can find is this demo page which doesn't work in IE8.

从我看到的Fabric文档，它看起来像像D34Raphael可以尝试面料：它支持转换SVG路径，圆，多边形，折线，椭圆，直线，线和图像元素，并且与允许进行交互的抽象对象一起工作。 比较处理矢量路径的性能与Raphael处理相同的基准的比较令人印象深刻（尽管没有给出比较基准包括互动或动画）。

From what I've seen of the Fabric docs, it looks like something like D34Raphael could be attempted for Fabric: it supports converting SVG path, circle, polygon, polyline, ellipse, rect, line, and image elements, and works with abstracted objects that allow for ongoing interactivity. The benchmarks comparing performance of Fabric handling vector paths compared to Raphael handling the same are impressive (although no comparison benchmarks are given that involve interaction or animation).

一些典型的D3项目作为例子：

A couple of typical D3 projects as examples:

• 强制定向图


• 径向节点链接树图

• Force directed graphs
• Radial node-link tree diagrams

我相信我不是第一个研究这个的。我不太喜欢开始尝试实现这样的想法，只是发现有一些不可避免的问题，任何人更有经验的面料，帆布和/或D3可以从一开始就指出。

I'm sure I'm not the first to have looked into this. I don't much like the idea of launching into trying to implement something like this, only to find there's some unavoidable problem that anyone more experienced with Fabric, Canvas and/or D3 could have pointed out from the start.

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


• 有什么关于D3如何工作与SVG，简单地不能通过布线的SVG到Canvas转换和对象模型管道？


• 有什么简单的方法推出D3输出通过Fabric比D34Raphael分歧D3项目并调整其输出的方法？

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

What I've tried: Some issues I've already looked into:

• Fabric会有一个类似的问题，D34Raphael在非常限制其适应D3的DOM查询工具的能力（因为它适用于抽象对象，而不是DOM元素） - 但这是一个可以用一个组织良好的对象结构来处理。


• Raphael和Fabric在IE8中使用VML，但是通过不同的引擎，因此Raphael和Fabric的excanvas在VML中实现的功能可能存在差异。在我的测试中，到目前为止，在IE8的动画和互动性能差，但功能看起来可比性，并且Fabric似乎比Raphael更好的
  
• Fabric的性能与从SVG转换的形状似乎很好，似乎很好如果重绘，基于D3的交互和动画应该是平滑的，因为它们需要与初始绘图类似的过程（但是可能有一些我没有想过的）。


• Fabric的组比起Raphael的集更像是D3的原生SVG组（但我可能在这里忽略了一些东西）。

• Fabric will have a similar problem as D34Raphael in being very limited in its ability to adapt D3's DOM querying tools (since it works with abstracted objects, not DOM elements) - but that's something that can be worked around with a well-organised object structure.
• Both Raphael and Fabric use VML in IE8, but through different engines, so there may be differences in what features Raphael and Fabric's excanvas have managed to implement in VML. In my testing so far, both have poor performance with animation and interactivity in IE8, but features seem comparable, and Fabric seems to be much better than Raphael for rendering VML text in IE8.
• Fabric's performance with shapes converted from SVG seems great, and it seems as if redraws, interactivity and animation based on D3 should be smooth since these require similar processes to the initial draw (but there may be something I've not thought of here).
• It appears that Fabric's groups are more like the native SVG groups worked with by D3 than Raphael's sets (but I may have overlooked something here).

推荐答案

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

Disclaimer: I'm the author of Fabric.js

。要处理您的要点：

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

Are there any existing projects that allow D3 output to be rendered using fabric.js, similar to D34Raphael?

不是我知道的。但从我可以看到，D3.js有SVG输出。和Fabric有SVG解析器，所以它看起来很简单的喂D3的标记到面料的渲染。

Not that I know of. But from what I can see, D3.js has SVG output. And Fabric has SVG parser, so it seems pretty straightforward to feed D3's markup to Fabric for rendering.

有什么D3如何工作SVG，简单地不能通过Fabric的SVG到Canvas转换和对象模型管道？

Is there anything about how D3 works with SVG that simply couldn't be piped through Fabric's SVG to Canvas conversion and object model?

我不太熟悉D3，但看看你链接到的一个例子，我看到一些兼容性问题确实。我复制了强制定向图的整个SVG标记，并将其加载到厨房水槽

I'm not really familiar with D3, but looking at one of the examples you linked to, I see some compatibility issues indeed. I copied entire SVG markup of "force directed graphs" and loaded it in kitchensink

>

正确呈现圆形，但有些线条没有线。奇怪的是，所有的行都被解析并正确地加载到画布上。但他们不可见。为什么？因为他们在D3.js中的样式是通过.line类定义的，我们不支持在Fabric中进行样式表解析。

Circles are rendered properly-ish, but something is off with lines. Curiously, all the lines are parsed and loaded onto canvas correctly. But they're not visible. Why? Because their styles in D3.js are defined via ".line" class and we don't support stylesheet parsing in Fabric.

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

如果我们要将这些样式展开到每一行

If we were to "unroll" those styles unto each line (either via "stroke" and "stroke-opacity" attributes or style="stroke: ...; stroke-opacity: ...;") it would work as expected.

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

Is there any simpler way to push D3 output through Fabric than the D34Raphael approach of forking the D3 project and adapting its output?

不能想到任何东西。

这篇关于推送D3.js输出通过fabric.js为IE8支持？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！