Reunind React, D3 și ecosistemul lor

De la crearea sa în 2011, D3.js a devenit standardul de facto pentru construirea de vizualizări complexe de date pe web. De asemenea, React se maturizează rapid ca bibliotecă de alegere pentru crearea de interfețe de utilizator bazate pe componente.

Atât React, cât și D3 sunt două instrumente excelente concepute cu obiective care se ciocnesc uneori. Ambele preiau controlul asupra elementelor interfeței cu utilizatorul și o fac în moduri diferite. Cum îi putem face să lucreze împreună în timp ce le optimizăm pentru avantajele distincte în conformitate cu proiectul dvs. actual?

În această postare, vom vedea cum putem aborda construirea de proiecte React care au nevoie de bunătatea puternică a graficului D3. Vom descoperi diferite tehnici și cum să alegem cea mai bună bibliotecă pentru nevoile dvs. în principalele lucrări și proiecte secundare.

D3 și DOM

D3 din D3.js reprezintă documente bazate pe date. D3.js este o bibliotecă de nivel scăzut care oferă elementele de bază necesare pentru a crea vizualizări interactive. Utilizează standarde web precum SVG, HTML, canvas și CSS pentru a asambla o cutie de instrumente front-end cu un API vast și control aproape nelimitat asupra aspectului și comportamentului vizualizărilor. De asemenea, oferă câteva funcții matematice care ajută utilizatorii să calculeze căi complexe SVG.

Cum functioneazã?

Pe scurt, D3.js încarcă date și le atașează la DOM. Apoi, leagă acele date la elementele DOM și transformă acele elemente, făcând tranziție între state dacă este necesar.

Selecțiile D3.js sunt similare cu obiectele jQuery, deoarece ne ajută să ne ocupăm de complexitatea SVG. Modul în care se face acest lucru este comparabil cu modul în care jQuery tratează elementele HTML DOM. Ambele biblioteci au, de asemenea, o API similară bazată pe lanț și utilizarea DOM-ului ca stocare a datelor.

Asocieri de date

Adunările de date, așa cum se explică în articolul lui Mike Bostocks „Thinking with Joins”, sunt procesul prin care D3 leagă datele la elementele DOM prin utilizarea selecțiilor.

Asocierea datelor ne ajută să potrivim datele pe care le furnizăm cu elementele deja create, să adăugăm elemente care lipsesc și să eliminăm elementele care nu mai sunt necesare. Ei folosesc selecțiile D3.js, care, atunci când sunt combinate cu date, împart elementele selectate în trei grupuri diferite: elemente care trebuie create (grupul de introducere), elemente care trebuie actualizate (grupul de actualizare) și elemente care necesită să fie eliminat (grupul de ieșire).

În practică, un obiect JavaScript cu două matrice reprezintă o unire de date. Putem declanșa operațiuni pe grupurile de intrare și ieșire apelând metodele de intrare și ieșire ale selecției, în timp ce putem opera direct pe grupul de actualizare în cea mai recentă versiune a D3.js.

După cum este descris de Bostock, cu conexiunile de date, „puteți vizualiza datele în timp real, permite explorarea interactivă și tranziția fără probleme între seturile de date”. Ele sunt efectiv un algoritm de diff, similar modului în care React gestionează redarea elementelor copil, așa cum vom vedea în secțiunile următoare.

D3 Biblioteci

Comunitatea D3 nu a găsit o modalitate standard de a crea componente din codul D3, ceea ce este o nevoie frecventă, deoarece D3.js este remarcabil de la un nivel scăzut. Am putea spune că există aproape la fel de multe modele de încapsulare ca bibliotecile bazate pe D3, deși le voi clasifica - prin intermediul API-ului lor - în patru grupuri: orientate pe obiecte, declarative, funcționale și înlănțuite (sau asemănătoare D3).

Am făcut câteva cercetări asupra ecosistemului D3.js și am selectat un subset mic, de înaltă calitate. Sunt biblioteci actualizate cu D3.js versiunea 4 și cu o bună acoperire a testelor. Ele diferă prin tipul de API și prin granularitatea abstracțiilor lor.

Plozabil

Plotable este o bibliotecă populară de diagrame orientată pe obiecte care prezintă o granularitate scăzută; deci, trebuie să setăm manual axe, scale și diagrame pentru a compune diagrame. Puteți vedea un exemplu aici.

Panou

Billboard este o furcă a celebrei biblioteci C3.js, actualizată cu compatibilitatea cu versiunea 4 a D3.js și menită să dea continuitate acestei biblioteci clasice. Este scris folosind ECMAScript 6 și noi instrumente moderne, cum ar fi Webpack. API-ul său se bazează pe obiecte de configurare transmise graficelor, așa că am putea spune că este un API declarativ.

Vega

Vega duce calea declarativă un pic mai departe, evoluând configurațiile din obiecte JavaScript în fișiere JSON pur. Acesta își propune să implementeze o gramatică de vizualizare inspirată de The Grammar of Graphics , o carte de Leland Wilkinson care formalizează elementele de bază ale vizualizărilor de date și care a fost o inspirație și pentru D3.js. Puteți juca cu editorul său, selectând unul dintre exemple ca punct de plecare.

D3FC

D3FC folosește D3.js și blocuri personalizate pentru a vă ajuta să creați diagrame interactive puternice atât în ​​format SVG, cât și în canvas. Dispune de o interfață funcțională, cu granularitate redusă și o cantitate mare de cod D3.js, așa că, deși puternic, probabil că este nevoie de puțină învățare. Consultați exemplele sale.

Britecharts

Britecharts – o bibliotecă creată de Eventbrite, al cărei contributor principal – folosește Reusable Chart API, un model de încapsulare popularizat de Mike Bostock în postarea sa „Towards Reusable Charts” și folosit în alte biblioteci precum NVD3. Britecharts creează o abstractizare la nivel înalt, facilitând crearea diagramelor, păstrând în același timp o complexitate scăzută în interior, permițând dezvoltatorilor D3 să personalizeze Britecharts pentru utilizarea lor. Am petrecut mult timp construind o interfață de utilizare îmbunătățită și multe demonstrații accesibile.

Rezumând bibliotecile după API-urile lor, le-am putea reprezenta astfel:

React și DOM

React este o bibliotecă JavaScript care ne ajută să construim interfețe cu utilizatorul compunând componente . Aceste componente țin evidența stării lor și trec proprietăți pentru a se redă din nou în mod eficient, optimizând performanța aplicației.

Cum functioneazã?

DOM-ul virtual, care este o reprezentare a stării actuale a DOM-ului, este tehnologia care permite optimizările de redare React. Biblioteca folosește un algoritm complex de diff pentru a înțelege ce părți ale aplicației trebuie să fie redate din nou atunci când condițiile se schimbă. Acest algoritm de diferență este numit „algoritm de reconciliere”.

Componente copii dinamice

La randarea componentelor care conțin o listă de elemente, dezvoltatorii trebuie să folosească o proprietate unică „cheie” atașată componentelor secundare. Această valoare ajută algoritmul de diferență să descopere dacă elementul trebuie să fie redat din nou atunci când date noi - sau stare, așa cum este numită în lumea React - sunt transmise componentului. Algoritmul de reconciliere verifică valorile cheilor pentru a vedea dacă elementul trebuie adăugat sau eliminat. Vă simțiți familiar acest lucru după ce ați aflat despre conexiunile de date ale D3.js?

Începând cu versiunea 0.14, React păstrează și redarea într-un modul separat. În acest fel, putem folosi aceleași componente pentru a reda în medii diferite, cum ar fi aplicații native (React Native), realitate virtuală (React VR) și DOM (react-dom). Această flexibilitate este similară modului în care codul D3.js poate fi redat în diferite contexte, cum ar fi SVG și canvas.

React și D3.js

Atât React, cât și D3 împărtășesc obiectivul de a ne ajuta să facem față DOM-ului și complexității sale într-un mod extrem de optimizat. De asemenea, împărtășesc o preferință pentru funcțiile pure - cod care, pentru o intrare dată, returnează întotdeauna aceeași ieșire fără a provoca efecte secundare - și componentele apatride.

Cu toate acestea, preocuparea comună cu privire la DOM face ca aceste două biblioteci cu opinie să se ciocnească atunci când determină care trebuie să redea și să anime elementele interfeței cu utilizatorul. Vom vedea diferite moduri de a rezolva această dispută și că nu există un răspuns ușor. Totuși, am putea stabili o regulă strictă: nu ar trebui să împărtășească niciodată controlul DOM . Asta ar fi o rețetă pentru dezastru.

Abordari

Când integrăm React și D3.js, putem face acest lucru la diferite niveluri, aplecându-ne mai mult pe partea D3.js sau pe partea React. Să vedem cele patru alegeri principale ale noastre.

D3.js în React

Prima abordare pe care o putem urma este să oferim codului nostru D3 cât mai mult control DOM posibil. Utilizează o componentă React pentru a reda un element SVG gol care funcționează ca element rădăcină al vizualizării datelor noastre. Apoi folosește metoda ciclului de viață componentDidUpdate pentru, folosind acel element rădăcină, să creeze diagrama folosind codul D3.js pe care l-am folosi într-un scenariu JavaScript vanilla. De asemenea, am putea bloca orice actualizări suplimentare ale componentelor făcând ca metoda shouldComponentUpdate să returneze întotdeauna false .

 class Line extends React.Component { static propTypes = {...} componentDidMount() { // D3 Code to create the chart // using this._rootNode as container } shouldComponentUpdate() { // Prevents component re-rendering return false; } _setRef(componentNode) { this._rootNode = componentNode; } render() { <div className="line-container" ref={this._setRef.bind(this)} /> } }

Evaluând această abordare, recunoaștem că oferă unele beneficii și dezavantaje. Printre beneficii, aceasta este o soluție simplă care funcționează bine de cele mai multe ori. Este, de asemenea, cea mai naturală soluție atunci când portați codul existent în React sau când utilizați diagrame D3.js care deja funcționau în altă parte.

În dezavantaj, amestecarea atât a codului React, cât și a codului D3.js într-o componentă React ar putea fi văzută ca puțin grosolană, încorporând prea multe dependențe și făcând fișierul prea lung pentru a fi considerat cod de calitate. De asemenea, această implementare nu pare deloc React-idiomatică. În cele din urmă, deoarece serverul de randare React nu apelează metoda componentDidUpdate , nu putem livra o versiune redată a diagramei în HTML inițial.

Reacționează Faux DOM

Implementat de Oliver Caldwell, React Faux DOM „este o modalitate de a utiliza instrumentele D3 existente, dar o redați prin React în ethosul React”. Folosește o implementare DOM falsă pentru a păcăli D3.js să creadă că are de-a face cu un DOM real. În acest fel, păstrăm arborele React DOM în timp ce folosim D3.js în — aproape — tot potențialul său.

 import {withFauxDOM} from 'react-faux-dom' class Line extends React.Component { static propTypes = {...} componentDidMount() { const faux = this.props.connectFauxDOM('div', 'chart'); // D3 Code to create the chart // using faux as container d3.select(faux) .append('svg') {...} } render() { <div className="line-container"> {this.props.chart} </div> } } export default withFauxDOM(Line);

Un avantaj al acestei abordări este că vă permite să utilizați majoritatea API-urilor D3.js, facilitând integrarea cu codul D3.js deja construit. De asemenea, permite randarea pe partea serverului. Un neajuns al acestei strategii este că este mai puțin performantă, deoarece plasăm o altă implementare DOM fals înaintea DOM-ului virtual React, virtualizând DOM-ul de două ori. Această problemă limitează utilizarea sa la vizualizările de date mici și mijlocii.

Metode ciclului de viață Ambalare

Această abordare, declarată pentru prima dată de Nicolas Hery, folosește metodele ciclului de viață prezente în componentele React bazate pe clasă. Acesta cuprinde elegant crearea, actualizarea și eliminarea diagramelor D3.js, stabilind o graniță clară între React și codul D3.js.

 import D3Line from './D3Line' class Line extends React.Component { static propTypes = {...} componentDidMount() { // D3 Code to create the chart this._chart = D3Line.create( this._rootNode, this.props.data, this.props.config ); } componentDidUpdate() { // D3 Code to update the chart D3Line.update( this._rootNode, this.props.data, this.props.config, this._chart ); } componentWillUnmount() { D3Line.destroy(this._rootNode); } _setRef(componentNode) { this._rootNode = componentNode; } render() { <div className="line-container" ref={this._setRef.bind(this)} /> } }

D3Line este cam așa:

 const D3Line = {}; D3Line.create = (el, data, configuration) => { // D3 Code to create the chart }; D3Line.update = (el, data, configuration, chart) => { // D3 Code to update the chart }; D3Line.destroy = () => { // Cleaning code here }; export default D3Line;

Codarea în acest fel produce o componentă React ușoară care comunică cu o instanță de diagramă bazată pe D3.js printr-un API simplu (creați, actualizați și eliminați), împingând în jos orice metode de apel invers pe care vrem să le ascultăm.

Această strategie promovează o separare clară a preocupărilor, folosind o fațadă pentru a ascunde detaliile de implementare ale diagramei. Ar putea să încapsuleze orice grafic, iar interfața generată este simplă. Un alt avantaj este că este ușor de integrat cu orice cod D3.js deja scris și ne permite să folosim tranzițiile excelente ale D3.js. Principalul dezavantaj al acestei metode este că randarea pe server nu este posibilă.

Reacționează pentru DOM, D3 pentru Math

În această strategie, limităm utilizarea D3.js la minimum. Aceasta înseamnă efectuarea de calcule pentru căi SVG, scale, machete și orice transformări care preiau datele utilizatorului și le transformă în ceva ce putem desena cu React.

Utilizarea D3.js doar pentru matematică este posibilă datorită unui număr mare de sub-module D3.js care nu au legătură cu DOM. Această cale este cea mai prietenoasă cu React, oferind bibliotecii Facebook o guvernare completă asupra DOM, ceea ce face remarcabil de bine.

Să vedem un exemplu simplificat:

 class Line extends React.Component { static propTypes = {...} drawLine() { let xScale = d3.scaleTime() .domain(d3.extent(this.props.data, ({date}) => date)); .rangeRound([0, this.props.width]); let yScale = d3.scaleLinear() .domain(d3.extent(this.props.data, ({value}) => value)) .rangeRound([this.props.height, 0]); let line = d3.line() .x((d) => xScale(d.date)) .y((d) => yScale(d.value)); return ( <path className="line" d={line(this.props.data)} /> ); } render() { <svg className="line-container" width={this.props.width} height={this.props.height} > {this.drawLine()} </svg> } }

Această tehnică este preferata dezvoltatorilor experimentați React, deoarece este în concordanță cu modul React. De asemenea, odată ce este pus în aplicare, construirea diagramelor cu codul său se simte grozav. Un alt beneficiu ar fi redarea pe partea de server și, eventual, React Native sau React VR.

În mod paradoxal, aceasta este abordarea care necesită mai multe cunoștințe despre cum funcționează D3.js, deoarece trebuie să ne integrăm cu sub-modulele sale la un nivel scăzut. Trebuie să reimplementam unele funcționalități D3.js — axele și formele sunt mai comune; perii, zoom-uri și tragerea probabil cel mai greu - și acest lucru implică o cantitate semnificativă de muncă în avans.

De asemenea, ar trebui să implementăm toate animațiile. Avem instrumente grozave în ecosistemul React care ne permit să gestionăm animațiile — vezi reacții-tranziție-grup, reacție-mișcare și reacție-mutare - deși niciunul dintre ele nu ne permite să creăm interpolări complexe ale căilor SVG. O întrebare în așteptare ar fi cum poate fi folosită această abordare pentru a reda diagrame folosind elementul canvas HTML5.

În diagrama următoare, putem vedea toate abordările descrise în funcție de nivelul de integrare atât cu React, cât și cu D3.js:

Bibliotecile React-D3.js

Am făcut câteva cercetări asupra bibliotecilor D3.js-React, care sper să vă ajute atunci când vă confruntați cu decizia de a alege o bibliotecă cu care să lucrați, să contribuiți sau să furați. Conține niște valori subiective, așa că vă rugăm să o luați cu un grăunte de sare.

Această cercetare a relevat că, deși există multe biblioteci, nu multe dintre ele sunt întreținute. Eu însumi, în calitate de întreținător, pot înțelege cât de greu este să țin pasul cu schimbările dintr-o bibliotecă majoră și că a avea grijă de două ar fi o sarcină descurajantă.

De asemenea, numărul de biblioteci pregătite pentru producție (de la versiunea 1.0.0 și mai sus) este încă destul de scăzut. Probabil că are de-a face cu cantitatea de muncă necesară pentru a expedia o bibliotecă de acest tip.

Să vedem câteva dintre preferatele mele.

Victorie

Un proiect al companiei de consultanță Formidable Labs, Victory este o bibliotecă de componente de nivel scăzut de elemente de diagramă. Datorită acestei caracteristici de nivel scăzut, componentele Victory pot fi combinate cu diferite configurații pentru a crea vizualizări complexe de date. Sub capotă, reimplementează funcțiile D3.js, cum ar fi pensula și zoomul, deși folosește d3-interpolate pentru animații.

Folosirea acesteia pentru o diagramă cu linii ar arăta astfel:

 class LineChart extends React.Component { render() { return ( <VictoryChart height={400} width={400} containerComponent={<VictoryVoronoiContainer/>} > <VictoryGroup labels={(d) => `y: ${dy}`} labelComponent={ <VictoryTooltip style={{ fontSize: 10 }} /> } data={data} > <VictoryLine/> <VictoryScatter size={(d, a) => {return a ? 8 : 3;}} /> </VictoryGroup> </VictoryChart> ); } }

Aceasta produce o diagramă cu linii ca aceasta:

Începeți cu Victory este ușor și are câteva bonusuri frumoase, cum ar fi zoom-ul și containerul Voronoi pentru sfaturi. Este o bibliotecă la modă, deși este încă într-o stare de pre-lansare și are un număr mare de erori în așteptare. Victory este singura bibliotecă în acest moment pe care o poți folosi cu React Native.

Recarturi

Lustruit din punct de vedere estetic, cu o experiență plăcută de utilizator, animații fluide și un sfat cu instrumente minunat, Recharts este una dintre bibliotecile mele preferate React-D3.js. Recharts folosește doar scara d3, interpolarea d3 și forma d3. Oferă un nivel mai mare de granularitate decât Victory, limitând cantitatea de vizualizări de date pe care le putem compune.

Utilizarea Recharts arată astfel:

 class LineChart extends React.Component { render () { return ( <LineChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}} > <XAxis dataKey="name"/> <YAxis/> <CartesianGrid strokeDasharray="3 3"/> <Tooltip/> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/> <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> </LineChart> ); } } 

Această bibliotecă este, de asemenea, foarte bine testată și, deși este încă în versiune beta, conține unele dintre diagramele obișnuite, o diagramă radar, hărți cu arbori și chiar perii. Puteți verifica exemplele sale pentru a vedea mai multe. Dezvoltatorii care contribuie la acest proiect au muncit serios în el, realizând animații netede cu proiectul lor de animație reacționează-line.

Nivo

Nivo este o bibliotecă de diagrame React-D3.js de nivel înalt. Oferă o mulțime de opțiuni pentru randare: SVG, canvas, chiar și o versiune HTML bazată pe API a diagramelor, care este ideală pentru randarea pe server. Utilizează React Motion pentru animații.

API-ul său este puțin diferit, deoarece dezvăluie doar o componentă configurabilă pentru fiecare diagramă. Să vedem un exemplu:

 class LineChart extends React.Component { render () { return ( <ResponsiveLine data={data} margin={{ "top": 50, "right": 110, "bottom": 50, "left": 60 }} minY="auto" stacked={true} axisBottom={{ "orient": "bottom", "tickSize": 5, "tickPadding": 5, "tickRotation": 0, "legend": "country code", "legendOffset": 36, "legendPosition": "center" }} axisLeft={{ "orient": "left", "tickSize": 5, "tickPadding": 5, "tickRotation": 0, "legend": "count", "legendOffset": -40, "legendPosition": "center" }} dotSize={10} dotColor="inherit:darker(0.3)" dotBorderWidth={2} dotBorderColor="#ffffff" enableDotLabel={true} dotLabel="y" dotLabelYOffset={-12} animate={true} motionStiffness={90} motionDamping={15} legends={[ { "anchor": "bottom-right", "direction": "column", "translateX": 100, "itemWidth": 80, "itemHeight": 20, "symbolSize": 12, "symbolShape": "circle" } ]} /> ); } } 

Raphael Benitte a făcut o treabă uluitoare cu Nivo. Documentația este minunată și demonstrațiile sale configurabile. Datorită nivelului de abstractizare mai ridicat al acestei biblioteci, este foarte simplu de utilizat și am putea spune că oferă mai puțin potențial pentru crearea de vizualizare. O caracteristică plăcută a Nivo este posibilitatea de a utiliza modele și gradienți SVG pentru a vă completa diagramele.

VX

VX este o colecție de componente de vizualizare de nivel scăzut pentru crearea de vizualizări. Nu are opinie și se presupune a fi folosit pentru a produce alte biblioteci de diagrame sau așa cum este.

Să vedem niște coduri:

 class VXLineChart extends React.Component { render () { let {width, height, margin} = this.props; // bounds const xMax = width - margin.left - margin.right; const yMax = height - margin.top - margin.bottom; // scales const xScale = scaleTime({ range: [0, xMax], domain: extent(data, x), }); const yScale = scaleLinear({ range: [yMax, 0], domain: [0, max(data, y)], nice: true, }); return ( <svg width={width} height={height} > <rect x={0} y={0} width={width} height={height} fill="white" rx={14} /> <Group top={margin.top}> <LinePath data={data} xScale={xScale} yScale={yScale} x={x} y={y} stroke='#32deaa' strokeWidth={2} /> </Group> </svg> ); } }; 

Având în vedere această granularitate la nivel scăzut, cred că VX este un D3.js pentru lumea React. Este agnostic cu privire la biblioteca de animații pe care utilizatorul dorește să o folosească. Momentan, este încă în versiunea beta incipientă, deși este folosit în producție de Airbnb. Deficiențele sale în acest moment sunt lipsa suportului pentru interacțiuni precum periajul și zoomul.

Britecharts React

Britecharts React este încă în versiune beta și este singura dintre aceste biblioteci care utilizează abordarea de includere a metodei ciclului de viață. Acesta își propune să permită utilizarea vizualizărilor Britecharts în React prin crearea unui pachet de cod ușor de utilizat.

Iată un cod simplu pentru o diagramă cu linii:

 class LineChart extends React.Component { render () { const margin = { top: 60, right: 30, bottom: 60, left: 70, }; return ( <TooltipComponent data={lineData.oneSet()} topicLabel="topics" title="Tooltip Title" render={(props) => ( <LineComponent margin={margin} lineCurve="basis" {...props} /> )} /> ); } } 

Nu pot fi obiectiv în privința asta. Britecharts React ar putea fi folosit ca schelă pentru a reda diagramele D3.js ca componente React. Nu acceptă randarea pe server, deși am inclus stări de încărcare pentru a depăși acest lucru într-un fel.

Simțiți-vă liber să verificați demonstrațiile online și să jucați cu codul.

Alegerea unei abordări sau biblioteci

Am grupat considerentele în construirea aplicațiilor cu diagrame în patru categorii: calitate, timp, scop și cost. Sunt prea multe, așa că ar trebui să simplificăm.

Să presupunem că reparăm calitatea . Am putea urmări să avem o bază de cod bine testată, actualizată cu D3.js versiunea 4 și cu documentație cuprinzătoare.

Dacă ne gândim la timp , o întrebare utilă pe care să ne-o punem este: „Este aceasta o investiție pe termen lung?” Dacă răspunsul este „da”, atunci v-aș sfătui să creați o bibliotecă bazată pe D3.js și să o includeți cu React folosind abordarea metodelor ciclului de viață. Această abordare separă codul nostru pe tehnologii și este mai rezistentă la timp.

Dacă, dimpotrivă, proiectul are termene strânse și echipa nu are nevoie să-l întrețină mult timp, aș sfătui să apucați biblioteca React-D3.js sau D3.js cea mai apropiată de specificații, să o bifurcați și să o folosiți. , încercând să contribuie pe parcurs.

Când avem de-a face cu domeniul de aplicare , ar trebui să ne gândim dacă ceea ce avem nevoie este un număr mic de diagrame de bază, o vizualizare complexă unică sau mai multe grafice foarte personalizate. În primul caz, aș alege din nou biblioteca cea mai apropiată de specificații și aș bifurca-o. Pentru vizualizările de date personalizate care conțin o mulțime de animații sau interacțiuni, construirea cu D3.js obișnuit este cea mai bună opțiune. În cele din urmă, dacă intenționați să utilizați diferite diagrame cu specificații specifice - poate cu sprijinul UX și al designerilor - atunci crearea bibliotecii D3 de la zero sau bifurcarea și personalizarea unei biblioteci existente ar funcționa cel mai bine.

În cele din urmă, partea de cost a deciziei este legată de bugetul și de formarea echipei. Ce fel de abilități are echipa ta? Dacă aveți dezvoltatori D3.js, aceștia ar prefera o separare clară între D3.js și React, așa că probabil că o abordare care utilizează metoda ciclului de viață ar funcționa grozav. Cu toate acestea, dacă echipa ta este în mare parte dezvoltatori React, le-ar plăcea să extindă oricare dintre bibliotecile actuale React-D3.js. De asemenea, utilizarea metodelor ciclului de viață împreună cu exemplele D3.js ar putea funcționa. Ceea ce recomand rar este să vă rulați propria bibliotecă React-D3.js. Cantitatea de muncă necesară în avans este descurajantă, iar ritmurile de actualizare ale ambelor biblioteci fac ca costurile de întreținere să nu fie banale.

rezumat

React și D3.js sunt instrumente excelente care ne ajută să facem față DOM-ului și provocărilor sale. Cu siguranță pot lucra împreună, iar noi suntem împuterniciți să alegem unde să tragem limita dintre ei. Există un ecosistem sănătos de biblioteci pentru a ne ajuta să folosim D3.js. Există o mulțime de opțiuni interesante și pentru React-D3.js, iar ambele biblioteci sunt în evoluție constantă, așa că proiectele care le combină pe ambele vor avea greu să țină pasul.

Alegerea va depinde de atât de multe variabile care nu pot fi luate în considerare într-un singur articol. Cu toate acestea, am acoperit majoritatea considerentelor principale, sperăm că vă dă putere să luați propria decizie în cunoștință de cauză.

Cu acest fond de ten, te încurajez să fii curios, să verifici bibliotecile menționate și să adaugi ceva bunătate grafică proiectelor tale.

Ați folosit vreunul dintre aceste proiecte? Dacă ai, care a fost experiența ta? Împărtășește-ne câteva cuvinte în comentarii.