Invio dell'output D3.js tramite fabric.js per il supporto IE8?

Question

Sto valutando Fabric.js in alternativa a Raphael.js per la creazione di visualizzazioni interattive compatibili con IE8, che non supporta SVG o canvas (il supporto IE8 non è negoziabile purtroppo).

Raphael può essere fatto funzionare con la libreria di visualizzazione D3.js - che emette SVG ed è incompatibile con IE8 - tramite la libreria colmare D34Raphael, una forcella di D3 adattato per l'utilizzo con Raphael. D34Raphael adatta alcune (ma non tutte) funzionalità D3 per l'output negli oggetti astratti di Raffaello invece del DOM, in modo che, in IE8, Raphael possa interpretare l'output di D3 come VML.

(modifica Feb 2014 - D34Raphael sembra essere morto, ma c'è un incredibilmente di nome alternativo R2D3 che sembra essere in fase di sviluppo attivo)

tessuto può Canvas uscita su IE8 (usando excanvas per convertire a VML) e può convertire SVG in elementi Canvas interattivi. Quindi, sembra teoricamente possibile che Fabric possa sostituire Raphael nel colmare D3 e IE8. Ciò comporterebbe la maggiore flessibilità di supportare anche la funzionalità Canvas e SVG.

---

Non ho trovato alcun tessuto equivalente al D34Raphael - il più vicino che posso trovare is this demo page che non funziona in IE8.

Da quello che ho visto sui documenti di Fabric, sembra che D34Raphael possa essere tentato per Fabric: supporta la conversione di elementi SVG percorso, cerchio, poligono, polilinea, ellisse, retta, linea e immagine, e lavora con oggetti astratti che consentono un'interattività continua. I numeri benchmarks comparing performance of Fabric handling vector paths compared to Raphael handling the same sono impressionanti (sebbene non vengano forniti benchmark comparativi che implichino l'interazione o l'animazione).

un paio di progetti tipici D3 come esempi:

• Force directed graphs
• Radial node-link tree diagrams

---

Sono sicuro che io non sono il primo ad aver esaminato questo. Non mi piace molto l'idea di lanciare nel tentativo di implementare qualcosa di simile, solo per scoprire che c'è qualche problema inevitabile che qualcuno con più esperienza con Fabric, Canvas e/o D3 avrebbe potuto indicare fin dall'inizio.

• Esistono progetti esistenti che consentono di eseguire il rendering dell'output D3 utilizzando fabric.js, simile a D34Raphael?
• C'è qualcosa nel modo in cui D3 funziona con SVG che semplicemente non può essere convogliato attraverso la conversione SVG di Canvas e il modello di oggetti di Fabric?
• C'è un modo più semplice per far passare l'output D3 attraverso Fabric rispetto all'approccio D34Raphael di forking del progetto D3 e dell'adattamento dell'output?

---

Quello che ho provato: Alcuni problemi che ho già esaminato:

• tessuto avrà un problema simile, come D34Raphael ad essere molto limitato nella sua capacità di adattarsi D3 di Strumenti di interrogazione DOM (poiché funziona con oggetti astratti, non con elementi DOM) - ma è qualcosa che può essere risolto con una struttura di oggetti ben organizzata.
• Sia Raphael che Fabric utilizzano VML in IE8, ma attraverso diversi motori, quindi potrebbero esserci differenze in ciò che le funzionalità di Raphael e Fabric escanvas sono state in grado di implementare in VML. Nei miei test finora, entrambi hanno prestazioni scadenti con animazione e interattività in IE8, ma le funzionalità sembrano paragonabili e Fabric sembra essere molto meglio di Raphael per rendering VML text in IE8.
• Le prestazioni del fabric con forme convertite da SVG sembrano grandiose e sembra che il ridisegno, l'interattività e l'animazione basate su D3 siano fluidi poiché richiedono processi simili all'estrazione iniziale (ma potrebbe esserci qualcosa a cui non ho pensato Qui).
• Sembra che i gruppi di Fabric siano più simili ai gruppi SVG nativi gestiti con D3 dai set di Raphael (ma forse qui ho trascurato qualcosa).

---

Answer 1

Disclaimer: io sono l'autore di Fabric.js

Molto interessante domanda. Per indirizzare i tuoi punti:

Esistono progetti esistenti che consentono di eseguire il rendering dell'output D3 utilizzando fabric.js, simile a D34Raphael?

Non che io sappia. Ma da quello che posso vedere, D3.js ha l'output SVG. E Fabric ha un parser SVG, quindi sembra piuttosto semplice alimentare il markup di D3 su Fabric per il rendering.

C'è qualcosa nel modo in cui D3 funziona con SVG che semplicemente non può essere convogliato attraverso la conversione SVG di Canvas e il modello di oggetti di Fabric?

Non ho molta familiarità con D3, ma guardando uno degli esempi a cui sei collegato, vedo davvero alcuni problemi di compatibilità. Ho copiato intera markup SVG di "forza diretta grafici" e caricato in kitchensink

cerchi vengono resi correttamente-ish, ma qualcosa è spento con linee. Curiosamente, tutte le linee sono analizzate e caricate correttamente sulla tela. Ma non sono visibili. Perché? Poiché i loro stili in D3.js sono definiti tramite la classe ".line" e non supportiamo l'analisi dei fogli di stile in Fabric.

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

Se dovessimo "srotolare" quegli stili unto ogni linea (sia via "corsa" e "colpo-opacità" attributi o style = "stroke: ...; stroke-opacità: ...; ") funzionerebbe come previsto.

Immagino che il problema con i contorni bianchi attorno ai cerchi abbia le stesse radici.

C'è un modo più semplice per inviare l'output D3 attraverso Fabric rispetto all'approccio D34Raphael di forking del progetto D3 e dell'adattamento della sua uscita?

Non riesco a pensare a nulla di veramente.