d3.js - 通过fabric.js推送D3.js输出以支持IE8？

Question

我正在评估Fabric.js作为Raphael.js的替代方案，以创建与不支持SVG或canvas的IE8兼容的交互式可视化效果(不幸的是，IE8支持不可转让)。

可以通过桥接库D3.js(适用于Raphael的D3分支)使Raphael与可视化库D34Raphael(输出SVG并且与IE8不兼容)一起使用。 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-我能找到的最接近的is this demo page在IE8中不起作用。

从我对Fabric文档的了解来看，Fabric可以尝试使用D34Raphael之类的东西:它支持转换SVG路径，圆形，多边形，折线，椭圆，矩形，直线和图像元素，并可以与抽象对象一起使用允许持续的交互性。 benchmarks comparing performance of Fabric handling vector paths compared to Raphael handling the same令人印象深刻(尽管没有给出涉及交互或动画的比较基准)。

以下是几个典型的D3项目:

Force directed graphs

Radial node-link tree diagrams

我敢肯定我不是第一个对此进行研究的人。我不太喜欢尝试实现类似的想法，只是发现存在一些不可避免的问题，任何对Fabric，Canvas和/或D3经验丰富的人都可能从一开始就指出这一点。

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

关于D3如何与SVG一起使用的任何事情，都无法通过Fabric的SVG管道传递给Canvas转换和对象模型？

是否有比通过D34Raphael fork D3项目并调整其输出的方法更简单的方法来通过Fabric推送D3输出？

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

Fabric将具有与D34Raphael类似的问题，因为它适应D3的DOM查询工具的能力非常有限(因为它可以处理抽象对象，而不是DOM元素)-但这可以通过组织良好的对象结构来解决。 。

Raphael和Fabric都在IE8中使用VML，但是通过不同的引擎，因此Raphael和Fabric的exanvas在VML中成功实现的功能可能有所不同。到目前为止，在我的测试中，两者在IE8中在动画和交互性方面均表现不佳，但是功能似乎相当，Fabric的rendering VML text in IE8似乎比Raphael好得多。

Fabric从SVG转换为形状时的表现似乎很棒，并且似乎重绘，基于D3的交互性和动画应该是平滑的，因为它们需要与初始绘制类似的过程(但是有些事情我在这里没有想到) 。

看来，Fabric的组更像是由D3使用的 native SVG组，而不是Raphael的组(但是我在这里可能忽略了一些东西)。

Answer 1

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

非常有趣的问题。要解决您的观点:

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

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

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标记，并将其加载到 kitchensink中

圆被渲染得有点像，但线条却有些瑕疵。奇怪的是，所有行均已解析并正确加载到 Canvas 上。但是它们不可见。为什么？由于D3.js中的样式是通过“.line”类定义的，因此我们不支持Fabric中的样式表解析。

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

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

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

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

真的想不出什么。