React, D3 ve Ekosistemlerini Bir Araya Getirmek

2011 yılında oluşturulmasından bu yana D3.js, web üzerinde karmaşık veri görselleştirmeleri oluşturmak için fiili standart haline geldi. React ayrıca bileşen tabanlı kullanıcı arayüzleri oluşturmak için tercih edilen kitaplık olarak hızla olgunlaşıyor.

Hem React hem de D3, bazen çatışan hedeflerle tasarlanmış iki mükemmel araçtır. Her ikisi de kullanıcı arabirimi öğelerinin kontrolünü ele alır ve bunu farklı şekillerde yapar. Mevcut projenize göre farklı avantajlarını optimize ederken bunların birlikte çalışmasını nasıl sağlayabiliriz?

Bu yazıda, D3'ün güçlü grafik iyiliğine ihtiyaç duyan React projeleri oluşturmaya nasıl yaklaşabileceğimizi göreceğiz. Ana çalışma ve yan projelerinizde farklı teknikleri ve ihtiyaçlarınıza en uygun kütüphaneyi nasıl seçeceğinizi keşfedeceğiz.

D3 ve DOM

D3.js'deki D3, veriye dayalı belgeler anlamına gelir. D3.js, etkileşimli görselleştirmeler oluşturmak için gerekli yapı taşlarını sağlayan düşük seviyeli bir kitaplıktır . Geniş bir API ve görselleştirmelerin görünümü ve davranışı üzerinde neredeyse sınırsız kontrole sahip bir ön uç araç kutusu oluşturmak için SVG, HTML, tuval ve CSS gibi web standartlarını kullanır. Ayrıca, kullanıcıların karmaşık SVG yollarını hesaplamasına yardımcı olan çeşitli matematiksel işlevler sağlar.

O nasıl çalışır?

Özetle, D3.js verileri yükler ve DOM'a ekler. Ardından, bu verileri DOM öğelerine bağlar ve gerekirse durumlar arasında geçiş yaparak bu öğeleri dönüştürür.

D3.js seçimleri, SVG karmaşıklığıyla başa çıkmamıza yardımcı oldukları için jQuery nesnelerine benzer. Bunun yapılma şekli, jQuery'nin HTML DOM öğeleriyle ilgilenme şekliyle karşılaştırılabilir. Her iki kitaplık da benzer bir zincir tabanlı API'yi ve veri depolama olarak DOM kullanımını paylaşır.

Veri Birleştirmeleri

Mike Bostocks'un “Thinking with Joins” makalesinde açıklandığı gibi veri birleştirmeleri, D3'ün seçimleri kullanarak verileri DOM öğelerine bağlama sürecidir.

Veri birleştirmeleri, sağladığımız verileri önceden oluşturulmuş öğelerle eşleştirmemize, eksik öğeleri eklememize ve artık gerekmeyen öğeleri kaldırmamıza yardımcı olur. Verilerle birleştirildiğinde seçilen öğeleri üç farklı gruba ayıran D3.js seçimlerini kullanırlar: oluşturulması gereken öğeler (enter grubu), güncellenmesi gereken öğeler (güncelleme grubu) ve ihtiyaç duyulan öğeler. kaldırılacak (çıkış grubu).

Pratikte, iki dizili bir JavaScript nesnesi bir veri birleştirmeyi temsil eder. D3.js'nin en son sürümünde doğrudan güncelleme grubu üzerinde işlem yapabiliyorken, seçimin giriş ve çıkış yöntemlerini çağırarak giriş ve çıkış gruplarında işlemleri tetikleyebiliriz.

Bostock tarafından açıklandığı gibi, veri birleştirme ile "gerçek zamanlı verileri görselleştirebilir, etkileşimli keşiflere izin verebilir ve veri kümeleri arasında sorunsuz geçiş yapabilirsiniz." Aşağıdaki bölümlerde göreceğimiz gibi, React'in alt öğelerin oluşturulmasını yönetme biçimine benzer şekilde, etkili bir şekilde bir diff algoritmasıdır.

D3 Kitaplıkları

D3 topluluğu, D3.js'nin oldukça düşük seviyeli olması nedeniyle sıklıkla ihtiyaç duyulan D3 kodundan bileşenler oluşturmanın standart bir yolunu bulamadı. Neredeyse D3 tabanlı kitaplıklar kadar çok sayıda kapsülleyici model olduğunu söyleyebiliriz, ancak bunları API'leri aracılığıyla dört gruba ayıracağım: nesne yönelimli, bildirimsel, işlevsel ve zincirleme (veya D3 benzeri).

D3.js ekosistemi hakkında biraz araştırma yaptım ve küçük, yüksek kaliteli bir alt küme seçtim. Bunlar, D3.js sürüm 4'e ve iyi test kapsamına sahip güncel kitaplıklardır. API türü ve soyutlamalarının ayrıntı düzeyi bakımından farklılık gösterirler.

çizilebilir

Plottable, düşük ayrıntı düzeyine sahip popüler bir nesne yönelimli grafik kitaplığıdır; bu nedenle, çizelgeleri oluşturmak için eksenleri, ölçekleri ve çizimleri manuel olarak ayarlamamız gerekiyor. Burada bir örnek görebilirsiniz.

Reklam panosu

Billboard, D3.js sürüm 4 uyumluluğu ile güncellenen ve bu klasik kütüphaneye süreklilik kazandırmayı amaçlayan ünlü C3.js kütüphanesinin bir çatalıdır. ECMAScript 6 ve Webpack gibi yeni modern araçlar kullanılarak yazılmıştır. API'si grafiklere iletilen yapılandırma nesnelerine dayanmaktadır, bu nedenle bildirimsel bir API olduğunu söyleyebiliriz.

vega

Vega, yapılandırmaları JavaScript nesnelerinden saf JSON dosyalarına dönüştürerek bildirim yolunu biraz daha ileri götürür. Leland Wilkinson'ın veri görselleştirmelerinin yapı taşlarını resmileştiren ve D3.js için de ilham kaynağı olan The Grammar of Graphics adlı kitabından ilham alan bir görselleştirme dilbilgisi uygulamayı amaçlamaktadır. Örneklerden birini başlangıç ​​noktası olarak seçerek editörüyle oynayabilirsiniz.

D3FC

D3FC, hem SVG'de hem de tuvalde güçlü etkileşimli grafikler oluşturmanıza yardımcı olmak için D3.js'yi ve özel yapı taşlarını kullanır. İşlevsel, düşük ayrıntı düzeyine sahip bir arayüze ve büyük miktarda D3.js koduna sahiptir, bu nedenle güçlü olmasına rağmen muhtemelen biraz öğrenme gerektirir. Örneklerine göz atın.

İngiliz Sanatları

Eventbrite tarafından oluşturulmuş bir kitaplık olan ve ana katkı sağlayıcılarından biri olduğum Britecharts, Mike Bostock tarafından "Yeniden Kullanılabilir Grafiklere Doğru" yazısında popüler hale getirilen ve NVD3 gibi diğer kitaplıklarda kullanılan bir kapsülleme modeli olan Yeniden Kullanılabilir Grafik API'sini kullanır. Britecharts, D3 geliştiricilerinin Britecharts'ı kendi kullanımları için özelleştirmesine izin vererek, iç kısımda düşük karmaşıklığı korurken grafikler oluşturmayı kolaylaştıran üst düzey bir soyutlama oluşturur. Parlak bir kullanıcı arayüzü ve birçok ulaşılabilir demo oluşturmak için çok zaman harcadık.

Kütüphaneleri API'lerine göre özetlersek, onları şu şekilde temsil edebiliriz:

Tepki ve DOM

React, bileşenleri oluşturarak kullanıcı arayüzleri oluşturmamıza yardımcı olan bir JavaScript kitaplığıdır. Bu bileşenler durumlarını takip eder ve kendilerini etkin bir şekilde yeniden oluşturmak için özellikleri aktarır ve uygulamanın performansını optimize eder.

O nasıl çalışır?

DOM'nin mevcut durumunun bir temsili olan sanal DOM, React'in yeniden oluşturma optimizasyonlarını sağlayan teknolojidir. Kitaplık, koşullar değiştiğinde uygulamanın hangi bölümlerinin yeniden oluşturulması gerektiğini anlamak için karmaşık bir fark algoritması kullanır. Bu fark algoritmasına "uzlaştırma algoritması" denir.

Dinamik Alt Bileşenler

Bir öğe listesi içeren bileşenleri işlerken, geliştiricilerin alt bileşenlere eklenmiş benzersiz bir "anahtar" özelliği kullanması gerekir. Bu değer, bileşene yeni veriler - veya React dünyasında adlandırıldığı gibi durum - geçirildiğinde öğenin yeniden oluşturulmasının gerekip gerekmediğini fark etme algoritmasına yardımcı olur. Mutabakat algoritması, öğenin eklenmesi veya çıkarılması gerekip gerekmediğini görmek için anahtarların değerlerini kontrol eder. D3.js'nin veri birleştirmelerini öğrendikten sonra bu tanıdık geliyor mu?

0.14 sürümünden bu yana React, oluşturucuyu ayrı bir modülde de tutar. Bu şekilde, yerel uygulamalar (React Native), sanal gerçeklik (React VR) ve DOM (react-dom) gibi farklı ortamlarda işlemek için aynı bileşenleri kullanabiliriz. Bu esneklik, D3.js kodunun SVG ve tuval gibi farklı bağlamlarda oluşturulabilme biçimine benzer.

Tepki ve D3.js

Hem React hem de D3, DOM ve karmaşıklığı ile son derece optimize edilmiş bir şekilde başa çıkmamıza yardımcı olma hedefini paylaşıyor. Ayrıca saf işlevler (belirli bir girdi için yan etkilere neden olmadan her zaman aynı çıktıyı döndüren kod) ve durumsuz bileşenler için bir tercihi paylaşırlar.

Ancak, DOM ile ilgili ortak endişe, kullanıcı arabirimi öğelerinin hangisinin oluşturulacağını ve canlandırılacağını belirlerken bu iki fikirli kitaplığın çakışmasına neden olur. Bu anlaşmazlığı çözmenin farklı yollarını göreceğiz ve bunun kolay bir cevabı yok. Yine de katı bir kural koyabiliriz: Asla DOM kontrolünü paylaşmamalılar . Bu felaket için bir reçete olurdu.

Yaklaşımlar

React ve D3.js'yi entegre ederken, bunu D3.js tarafına veya React tarafına daha fazla eğilerek farklı seviyelerde yapabiliriz. Dört ana seçeneğimize bakalım.

Tepki İçinde D3.js

İzleyebileceğimiz ilk yaklaşım, D3 kodumuza mümkün olduğunca çok DOM kontrolü vermektir. Veri görselleştirmemizin kök öğesi olarak çalışan boş bir SVG öğesi oluşturmak için bir React bileşeni kullanır. Ardından, bu kök öğeyi kullanarak, bir vanilya JavaScript senaryosunda kullanacağımız D3.js kodunu kullanarak grafiği oluşturmak için componentDidUpdate yaşam döngüsü yöntemini kullanır. Ayrıca, shouldComponentUpdate yöntemini her zaman false döndürecek şekilde yaparak diğer bileşen güncellemelerini de engelleyebiliriz.

 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)} /> } }

Bu yaklaşımı değerlendirdiğimizde, bazı faydalar ve dezavantajlar sunduğunu kabul ediyoruz. Avantajları arasında bu, çoğu zaman iyi sonuç veren basit bir çözümdür. Mevcut kodu React'e taşırken veya halihazırda başka bir yerde çalışan D3.js çizelgelerini kullanırken de en doğal çözümdür.

Olumsuz tarafı, bir React bileşeni içinde hem React kodunun hem de D3.js kodunun karıştırılması, çok fazla bağımlılık içermesi ve bu dosyayı kalite kodu olarak kabul edilemeyecek kadar uzun yapması biraz kaba olarak görülebilir. Ayrıca, bu uygulama hiç React-deyimsel gelmiyor. Son olarak, React oluşturma sunucusu componentDidUpdate yöntemini çağırmadığından, grafiğin işlenmiş bir sürümünü ilk HTML'de gönderemiyoruz.

Tepki Sahte DOM

Oliver Caldwell tarafından uygulanan React Faux DOM, "mevcut D3 takımını kullanmanın ancak React in the React ethos'unda React aracılığıyla işlemenin bir yoludur." D3.js'yi gerçek bir DOM ile uğraştığını düşünmesi için kandırmak için sahte bir DOM uygulaması kullanır. Bu şekilde, D3.js'yi neredeyse tüm potansiyeliyle kullanırken React DOM ağacını koruyoruz.

 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);

Bu yaklaşımın bir avantajı, D3.js API'lerinin çoğunu kullanmanıza izin vererek, halihazırda oluşturulmuş D3.js koduyla entegrasyonu kolaylaştırmasıdır. Ayrıca sunucu tarafında işlemeye izin verir. Bu stratejinin bir eksikliği, daha az performanslı olmasıdır, çünkü React'in sanal DOM'sinin önüne başka bir sahte DOM uygulaması yerleştiriyoruz ve DOM'u iki kez sanallaştırıyoruz. Bu sorun, kullanımını küçük ve orta ölçekli veri görselleştirmeleriyle sınırlar.

Yaşam Döngüsü Yöntemleri Sarma

İlk olarak Nicolas Hery tarafından belirtilen bu yaklaşım, sınıf tabanlı React bileşenlerinde bulunan yaşam döngüsü yöntemlerini kullanır. D3.js çizelgelerinin oluşturulmasını, güncellenmesini ve kaldırılmasını zarif bir şekilde tamamlayarak React ve D3.js kodu arasında keskin bir sınır oluşturur.

 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 şöyle bir şeydir:

 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;

Bu şekilde kodlama, basit bir API (oluşturma, güncelleme ve kaldırma) aracılığıyla D3.js tabanlı bir grafik örneğiyle iletişim kuran ve dinlemek istediğimiz geri arama yöntemlerini aşağı doğru iten hafif bir React bileşeni üretir.

Bu strateji, çizelgenin uygulama ayrıntılarını gizlemek için bir cephe kullanarak endişelerin net bir şekilde ayrılmasını teşvik eder. Herhangi bir grafiği kapsülleyebilir ve oluşturulan arayüz basittir. Diğer bir faydası da, önceden yazılmış herhangi bir D3.js koduyla entegrasyonun kolay olması ve D3.js'nin mükemmel geçişlerini kullanmamıza izin vermesidir. Bu yöntemin ana dezavantajı, sunucu tarafı oluşturmanın mümkün olmamasıdır.

DOM için Tepki, Matematik için D3

Bu stratejide, D3.js kullanımını minimumla sınırlandırıyoruz. Bu, SVG yolları, ölçekler, düzenler ve kullanıcı verilerini alan ve bunları React ile çizebileceğimiz bir şeye dönüştüren tüm dönüşümler için hesaplamalar yapmak anlamına gelir.

DOM ile ilgisi olmayan çok sayıda D3.js alt modülü sayesinde D3.js'yi yalnızca matematik için kullanmak mümkündür. Bu yol en React dostudur ve Facebook kitaplığına DOM üzerinde tam bir hakimiyet sağlar, bu da oldukça iyi yaptığı bir şeydir.

Basitleştirilmiş bir örnek görelim:

 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> } }

Bu teknik, React yöntemiyle tutarlı olduğu için deneyimli React geliştiricilerinin favorisidir. Ayrıca, bir kez yerleştirildiğinde, koduyla birlikte grafikler oluşturmak harika bir his verir. Diğer bir avantaj, sunucu tarafında ve muhtemelen React Native veya React VR'de oluşturma olacaktır.

Paradoksal olarak, bu, D3.js'nin nasıl çalıştığı hakkında daha fazla bilgi gerektiren yaklaşımdır, çünkü alt modülleri ile düşük seviyede entegre olmamız gerekir. Bazı D3.js işlevlerini yeniden uygulamamız gerekiyor - daha yaygın olan eksenler ve şekiller; fırçalar, yakınlaştırmalar ve sürükleme muhtemelen en zorudur - ve bu, önemli miktarda ön çalışma anlamına gelir.

Ayrıca tüm animasyonları uygulamamız gerekecek. React ekosisteminde, animasyonları yönetmemize izin veren harika araçlara sahibiz - tepki-geçiş-grubu, tepki-hareket ve tepki-harekete bakın - bunların hiçbiri SVG yollarının karmaşık enterpolasyonlarını oluşturmamıza izin vermiyor. Bekleyen bir soru, HTML5'in tuval öğesini kullanarak çizelgeleri oluşturmak için bu yaklaşımın nasıl kullanılabileceğidir.

Aşağıdaki şemada, hem React hem de D3.js ile entegrasyon düzeyine göre açıklanan tüm yaklaşımları görebiliriz:

React-D3.js Kitaplıkları

D3.js-React kitaplıkları üzerinde çalışmak, katkıda bulunmak veya çatallamak için bir kitaplık seçme kararıyla karşı karşıya kaldığınızda size yardımcı olacağını umduğum bazı araştırmalar yaptım. Bazı öznel ölçütler içerir, bu yüzden lütfen bir tuz tanesi ile alın.

Bu araştırma, çok sayıda kütüphane olmasına rağmen bunların çoğunun korunmadığını ortaya koydu. Kendim bir bakıcı olarak, büyük bir kütüphanedeki değişikliklere ayak uydurmanın ne kadar zor olduğunu ve ikisine bakmanın ne kadar göz korkutucu bir görev olacağını anlayabiliyorum.

Ayrıca, üretime hazır kitaplıkların sayısı (sürüm 1.0.0 ve üzeri) hala oldukça düşüktür. Muhtemelen bu tür bir kitaplığı göndermek için gereken iş miktarıyla ilgilidir.

Favorilerimden bazılarını görelim.

Zafer

Danışmanlık şirketi Formidable Labs tarafından bir proje olan Victory, grafik öğelerinden oluşan düşük seviyeli bir bileşen kitaplığıdır. Bu düşük seviyeli özellik nedeniyle, Zafer bileşenleri, karmaşık veri görselleştirmeleri oluşturmak için farklı konfigürasyonlarla bir araya getirilebilir. Kaputun altında, animasyonlar için d3-interpolate kullanmasına rağmen, fırça ve yakınlaştırma gibi D3.js özelliklerini yeniden uygular.

Bunu bir çizgi grafik için kullanmak şöyle görünür:

 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> ); } }

Bu, şöyle bir çizgi grafiği oluşturur:

Victory'ye başlamak kolaydır ve yakınlaştırma ve araç ipuçları için Voronoi kabı gibi bazı güzel bonusları vardır. Hala yayın öncesi durumunda olmasına ve bekleyen çok sayıda hataya sahip olmasına rağmen, modaya uygun bir kitaplıktır. Victory şu anda React Native ile kullanabileceğiniz tek kütüphanedir.

yeniden çizelgeler

Estetik olarak cilalanmış, keyifli bir kullanıcı deneyimi, pürüzsüz animasyonlar ve harika görünen bir araç ipucu ile Recharts, en sevdiğim React-D3.js kitaplıklarından biridir. Recharts yalnızca d3 ölçeğini, d3-interpolatını ve d3 şeklini kullanır. Oluşturabileceğimiz veri görselleştirmelerinin miktarını sınırlayarak, Victory'den daha yüksek bir ayrıntı düzeyi sunar.

Recharts'ı kullanmak şöyle görünür:

 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> ); } } 

Bu kitaplık da gerçekten iyi bir şekilde test edilmiştir ve hala beta sürümünde olmasına rağmen, bazı olağan çizelgeleri, bir radar grafiğini, ağaç haritalarını ve hatta fırçaları içerir. Daha fazlasını görmek için örneklerini inceleyebilirsiniz. Bu projeye katkıda bulunan geliştiriciler, animasyon projelerinin sorunsuz tepki vermesiyle pürüzsüz animasyonlar elde ederek, buna ciddi bir çalışma koydular.

Nivo

Nivo, üst düzey bir React-D3.js grafik kitaplığıdır. Oluşturma için birçok seçenek sunar: SVG, tuval, hatta sunucu tarafı oluşturma için ideal olan grafiklerin API tabanlı HTML sürümü. Animasyonlar için React Motion kullanır.

API'si biraz farklıdır, çünkü her grafik için yalnızca bir yapılandırılabilir bileşen gösterir. Bir örnek görelim:

 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, Nivo ile şaşırtıcı bir iş çıkardı. Belgeler güzel ve demoları yapılandırılabilir. Bu kütüphanenin daha yüksek soyutlama seviyesi nedeniyle, kullanımı son derece basittir ve görselleştirme oluşturma için daha az potansiyel sunduğunu söyleyebiliriz. Nivo'nun güzel bir özelliği, çizelgelerinizi doldurmak için SVG desenlerini ve gradyanlarını kullanma imkanıdır.

VX

VX, görselleştirmeler oluşturmak için düşük seviyeli görselleştirme bileşenlerinin bir koleksiyonudur. Fikirsizdir ve diğer grafik kitaplıklarını oluşturmak için veya olduğu gibi kullanılması gerekir.

Biraz kod görelim:

 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> ); } }; 

Bu düşük seviyeli ayrıntı düzeyi göz önüne alındığında, VX'i React dünyası için bir D3.js olarak düşünüyorum. Kullanıcının kullanmak istediği animasyon kitaplığı hakkında agnostiktir. Şu anda Airbnb tarafından üretimde kullanılmasına rağmen hala erken beta aşamasında. Şu anda eksiklikleri, fırçalama ve yakınlaştırma gibi etkileşimler için destek eksikliğidir.

Britecharts Tepki

Britecharts React hala beta sürümündedir ve bu kitaplıklardan yaşam döngüsü yöntemi sarma yaklaşımını kullanan tek kitaptır. Kullanımı kolay bir kod sarmalayıcı oluşturarak Britecharts görselleştirmelerinin React'te kullanılmasına izin vermeyi amaçlar.

İşte bir çizgi grafiği için basit kod:

 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} /> )} /> ); } } 

Bu konuda objektif olamam. Britecharts React, D3.js çizelgelerinizi React bileşenleri olarak oluşturmak için bir yapı iskelesi olarak kullanılabilir. Bunu bir şekilde aşmak için yükleme durumlarını dahil etmemize rağmen, sunucu tarafı oluşturmayı desteklemiyor.

Çevrimiçi demoları kontrol etmekten ve kodla oynamaktan çekinmeyin.

Bir Yaklaşım veya Kitaplık Seçme

Grafiklerle uygulama oluşturma konusundaki hususları dört kategoride gruplandırdım: kalite, zaman, kapsam ve maliyet. Çok fazlalar, bu yüzden basitleştirmeliyiz.

Diyelim ki kaliteyi düzelttik. İyi test edilmiş, D3.js sürüm 4 ile güncel ve kapsamlı belgelere sahip bir kod tabanına sahip olmayı hedefleyebiliriz.

Zamanı düşünürsek, kendimize sormamız gereken faydalı bir soru şudur: “Bu uzun vadeli bir yatırım mı?” Yanıt "evet" ise, D3.js tabanlı bir kitaplık oluşturmanızı ve yaşam döngüsü yöntemleri yaklaşımını kullanarak React ile sarmanızı öneririm. Bu yaklaşım, kodumuzu teknolojilere göre ayırır ve zamana karşı daha dayanıklıdır.

Aksine, projenin sıkı teslim tarihleri ​​​​varsa ve ekibin bunu uzun süre sürdürmesi gerekmiyorsa, spesifikasyonlara en yakın React-D3.js veya D3.js kitaplığını alıp çatallayıp kullanmanızı tavsiye ederim. , yol boyunca katkıda bulunmaya çalışıyor.

Kapsam ile ilgilenirken, ihtiyacımız olanın az sayıda temel çizelge mi, bir kerelik karmaşık görselleştirme mi yoksa yüksek düzeyde özelleştirilmiş birkaç grafik mi olduğunu düşünmeliyiz. İlk durumda, teknik özelliklere en yakın kütüphaneyi tekrar seçer ve çatallardım. Çok sayıda animasyon veya etkileşim içeren ısmarlama veri görselleştirmeleri için normal D3.js ile derleme en iyi seçenektir. Son olarak, belirli özelliklere sahip farklı grafikler kullanmayı planlıyorsanız - belki de UX'çilerin ve tasarımcıların desteğiyle - o zaman D3 kitaplığınızı sıfırdan veya çatallamadan oluşturmak ve mevcut bir kitaplığı özelleştirmek en iyi sonucu verir.

Son olarak, kararın maliyet tarafı, ekibin bütçesi ve eğitimi ile ilgilidir. Ekibinizin ne tür becerileri var? D3.js geliştiricileriniz varsa, D3.js ve React arasında net bir ayrım yapmayı tercih ederler, bu nedenle yaşam döngüsü yöntemi sarmayı kullanan bir yaklaşım büyük olasılıkla işe yarayacaktır. Ancak, ekibiniz çoğunlukla React geliştiricilerinden oluşuyorsa, mevcut React-D3.js kitaplıklarından herhangi birini genişletmekten keyif alacaklardır. Ayrıca, yaşam döngüsü yöntemlerini D3.js örnekleriyle birlikte kullanmak işe yarayabilir. Nadiren önerdiğim şey, kendi React-D3.js kitaplığınızı yuvarlamak. Önceden yapılması gereken iş miktarı göz korkutucudur ve her iki kütüphanenin güncelleme adımları bakım maliyetlerini önemsiz kılmaktadır.

Özet

React ve D3.js, DOM ve zorluklarıyla başa çıkmamıza yardımcı olacak harika araçlardır. Kesinlikle birlikte çalışabilirler ve aralarındaki çizgiyi nereye çekeceğimizi seçme yetkisine sahibiz. D3.js'yi kullanmamıza yardımcı olacak sağlıklı bir kitaplık ekosistemi mevcuttur. React-D3.js için de pek çok heyecan verici seçenek var ve her iki kitaplık da sürekli evrim halinde, bu nedenle ikisini birleştiren projelere ayak uydurmak zor olacak.

Seçim, hepsi tek bir makalede açıklanamayacak kadar çok değişkene bağlı olacaktır. Bununla birlikte, temel hususların çoğunu ele aldık ve umarız kendi bilinçli kararınızı vermeniz için size güç verdik.

Bu temel ile, merak etmenizi, bahsedilen kütüphaneleri kontrol etmenizi ve projelerinize biraz grafik iyiliği eklemenizi tavsiye ederim.

Bu projelerden herhangi birini kullandınız mı? Varsa, deneyiminiz neydi? Bazı kelimeleri yorumlarda bizimle paylaşın.