爲了支持IE8，通過fabric.js輸出D3.js輸出？

Question

我正在評估Fabric.js作爲Raphael.js的替代品，用於創建與不支持SVG或canvas的IE8兼容的交互式可視化（不幸的是，IE8支持不可談判）。

Raphael可以與可視化庫D3.js（輸出SVG並且與IE8不兼容）通過橋接庫D34Raphael（適用於Raphael的D3的一個分支）一起工作。 D34Raphael修改了一些（但不是全部）D3特性，輸出到Raphael的抽象對象中，而不是DOM，因此，在IE8上，Raphael可以將D3的輸出解釋爲VML。

（編輯2014年2月 - D34Raphael現在似乎是死了，但有一個赫然命名的替代R2D3，這似乎是在積極發展）

面料可以在IE8輸出畫布（使用excanvas轉換到VML），並且可以將SVG轉換爲交互式Canvas元素。因此，理論上可能的是Fabric可以在橋接D3和IE8中取代Raphael。這樣做會增加支持Canvas功能以及SVG的靈活性。

---

我還沒有發現任何面料相當於D34Raphael - 我能找到is this demo page不IE8中的工作最接近的一次。

從我看到的Fabric文檔看起來像D34Raphael可能會嘗試使用Fabric：它支持轉換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轉換和對象模型？
• 有沒有更簡單的方式來推動D3輸出通過結構比D34Raphael方法分叉D3項目和適應其輸出？

---

我已經試過什麼：我已經看過了一些問題：

• 面料將在其適應D3的能力正在非常有限了類似的問題，因爲D34Raphael DOM查詢工具（因爲它與抽象對象，而不是DOM元素一起工作） - 但這是可以用組織良好的對象結構解決的問題。
• Raphael和Fabric都在IE8中使用VML，但是通過不同的引擎，所以Raphael和Fabric的excanvas在VML中實現的特性可能存在差異。到目前爲止，在我的測試中，兩者在IE8中的動畫和交互性都很差，但功能似乎相當，Fabric看起來好於Raphael的rendering VML text in IE8。
• 從SVG轉換而來的形狀表現看起來很棒，而且基於D3的重繪，交互和動畫看起來應該是平滑的，因爲它們需要與初始繪製相似的過程（但可能有一些我沒有想到的這裏）。
• 看來Fabric的組更像是D3所使用的本地SVG組，而不是Raphael的組（儘管我可能在這裏忽略了一些東西）。

---

Answer 1

免責聲明：我Fabric.js

很有意思的問題的作者。要解決您的觀點：

是否有任何現有項目允許使用fabric.js渲染D3輸出，類似於D34Raphael？

不是我所知道的。但從我所看到的，D3.js有SVG輸出。 Fabric有SVG解析器，因此將D3的標記提供給Fabric進行渲染看起來相當簡單。

有什麼關於D3如何與SVG一起工作的，根本無法通過Fabric的SVG傳輸到Canvas轉換和對象模型？

我對D3並不是很熟悉，但是看看你鏈接到的一個例子，我確實看到了一些兼容性問題。我複製「力向圖」的整個SVG標記和kitchensink

圈被渲染正確十歲上下裝好了，但事情是關閉與線。奇怪的是，所有的行都被解析並正確加載到畫布上。但它們不可見。爲什麼？因爲它們在D3.js中的樣式是通過「.line」類定義的，我們不支持在Fabric中進行樣式表分析。

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

如果我們將「展開」你們每一行的樣式（無論是通過「中風」和「中風不透明度」屬性或樣式=「行程：......;行程不透明度：...; 「）它會按預期工作。

我想象出圍繞着白色輪廓的問題具有相同的根源。

有沒有更簡單的方式來推動D3輸出通過結構比D34Raphael分叉D3項目和適應其輸出？

真的想不出什麼。