Menyatukan React, D3, Dan Ekosistemnya

Sejak dibuat pada tahun 2011, D3.js telah menjadi standar de facto untuk membangun visualisasi data yang kompleks di web. React juga cepat matang sebagai perpustakaan pilihan untuk membuat antarmuka pengguna berbasis komponen.

Baik React maupun D3 adalah dua alat luar biasa yang dirancang dengan tujuan yang terkadang bertabrakan. Keduanya mengendalikan elemen antarmuka pengguna, dan mereka melakukannya dengan cara yang berbeda. Bagaimana kami dapat membuatnya bekerja bersama sambil mengoptimalkan keunggulan mereka yang berbeda sesuai dengan proyek Anda saat ini?

Dalam posting ini, kita akan melihat bagaimana kita bisa mendekati pembangunan proyek React yang membutuhkan kebaikan grafik yang kuat dari D3. Kami akan menemukan berbagai teknik dan cara memilih perpustakaan terbaik untuk kebutuhan Anda dalam pekerjaan utama dan proyek sampingan Anda.

D3 Dan DOM

D3 di D3.js adalah singkatan dari dokumen berbasis data. D3.js adalah perpustakaan tingkat rendah yang menyediakan blok bangunan yang diperlukan untuk membuat visualisasi interaktif. Ini menggunakan standar web seperti SVG, HTML, kanvas, dan CSS untuk merakit kotak alat front-end dengan API yang luas dan kontrol yang hampir tak terbatas atas tampilan dan perilaku visualisasi. Ini juga menyediakan beberapa fungsi matematika yang membantu pengguna menghitung jalur SVG yang kompleks.

Bagaimana cara kerjanya?

Singkatnya, D3.js memuat data dan melampirkannya ke DOM. Kemudian, ia mengikat data tersebut ke elemen DOM dan mengubah elemen tersebut, bertransisi antar status jika perlu.

Pilihan D3.js mirip dengan objek jQuery, karena membantu kita menangani kompleksitas SVG. Cara ini dilakukan sebanding dengan cara jQuery menangani elemen DOM HTML. Kedua perpustakaan juga berbagi API berbasis rantai yang serupa dan penggunaan DOM sebagai penyimpanan data.

Gabung Data

Penggabungan data, seperti yang dijelaskan dalam artikel Mike Bostocks “Berpikir dengan Penggabungan,” adalah proses di mana D3 menautkan data ke elemen DOM melalui penggunaan pilihan.

Penggabungan data membantu kami mencocokkan data yang kami berikan dengan elemen yang sudah dibuat, menambahkan item yang hilang, dan menghapus elemen yang tidak lagi diperlukan. Mereka menggunakan pilihan D3.js, yang bila digabungkan dengan data, membagi elemen yang dipilih menjadi tiga grup berbeda: elemen yang perlu dibuat (grup enter), elemen yang perlu diperbarui (grup pembaruan) dan elemen yang perlu akan dihapus (grup keluar).

Dalam praktiknya, objek JavaScript dengan dua array mewakili gabungan data. Kami dapat memicu operasi pada grup masuk dan keluar dengan memanggil metode masuk dan keluar dari seleksi, sementara kami dapat langsung mengoperasikan grup pembaruan di versi terbaru D3.js.

Seperti yang dijelaskan oleh Bostock, dengan penggabungan data, “Anda dapat memvisualisasikan data waktu nyata, memungkinkan eksplorasi interaktif, dan transisi antar kumpulan data dengan lancar.” Mereka secara efektif merupakan algoritma diff, mirip dengan cara React mengelola rendering elemen anak, seperti yang akan kita lihat di bagian berikut.

Perpustakaan D3

Komunitas D3 belum menemukan cara standar untuk membuat komponen dari kode D3, yang sering menjadi kebutuhan karena D3.js sangat rendah levelnya. Kita dapat mengatakan bahwa ada pola enkapsulasi yang hampir sama banyaknya dengan perpustakaan berbasis D3, meskipun saya akan mengklasifikasikannya — melalui API mereka — menjadi empat kelompok: berorientasi objek, deklaratif, fungsional, dan dirantai (atau mirip D3).

Saya telah melakukan beberapa penelitian tentang ekosistem D3.js dan memilih subset kecil berkualitas tinggi. Mereka adalah pustaka terbaru dengan D3.js versi 4 dan dengan cakupan pengujian yang baik. Mereka berbeda dalam jenis API dan granularitas abstraksi mereka.

dapat diplot

Plottable adalah pustaka grafik berorientasi objek populer yang menampilkan granularitas rendah; jadi, kita perlu mengatur sumbu, skala dan plot secara manual untuk membuat grafik. Anda dapat melihat contohnya di sini.

Papan iklan

Billboard adalah cabang dari library C3.js yang terkenal, diperbarui dengan kompatibilitas D3.js versi 4 dan bertujuan untuk memberikan kontinuitas pada library klasik ini. Itu ditulis menggunakan ECMAScript 6 dan perkakas modern baru seperti Webpack. API-nya didasarkan pada objek konfigurasi yang diteruskan ke bagan, jadi kita bisa mengatakan itu adalah API deklaratif.

vega

Vega mengambil jalur deklaratif sedikit lebih jauh, mengembangkan konfigurasi dari objek JavaScript menjadi file JSON murni. Ini bertujuan untuk menerapkan tata bahasa visualisasi yang terinspirasi oleh The Grammar of Graphics , sebuah buku oleh Leland Wilkinson yang meresmikan blok bangunan visualisasi data dan yang juga merupakan inspirasi untuk D3.js. Anda dapat bermain dengan editornya, memilih salah satu contoh sebagai titik awal.

D3FC

D3FC memanfaatkan D3.js dan blok penyusun khusus untuk membantu Anda membuat bagan interaktif yang hebat baik di SVG maupun kanvas. Ini memiliki antarmuka fungsional, granularitas rendah dan sejumlah besar kode D3.js, jadi, meskipun kuat, mungkin perlu beberapa pembelajaran. Lihat contoh-contohnya.

britecharts

Britecharts — pustaka yang dibuat oleh Eventbrite, di mana saya adalah kontributor inti — memanfaatkan Reusable Chart API, pola enkapsulasi yang dipopulerkan oleh Mike Bostock dalam postingnya “Menuju Bagan yang Dapat Digunakan Kembali” dan digunakan di pustaka lain seperti NVD3. Britecharts menciptakan abstraksi tingkat tinggi, membuatnya mudah untuk membuat bagan, sekaligus menjaga kompleksitas rendah di dalamnya, memungkinkan pengembang D3 untuk menyesuaikan Britecharts untuk penggunaannya. Kami menghabiskan banyak waktu untuk membangun UI yang dipoles dan banyak demo yang dapat didekati.

Meringkas perpustakaan dengan API mereka, kami dapat merepresentasikannya seperti ini:

Bereaksi Dan DOM

React adalah library JavaScript yang membantu kita membangun antarmuka pengguna dengan menyusun komponen . Komponen-komponen ini melacak statusnya dan meneruskan properti untuk merender ulang dirinya sendiri secara efektif, mengoptimalkan kinerja aplikasi.

Bagaimana cara kerjanya?

DOM virtual, yang merupakan representasi dari status DOM saat ini, adalah teknologi yang memungkinkan pengoptimalan rendering ulang React. Pustaka menggunakan algoritme diff yang kompleks untuk memahami bagian mana dari aplikasi yang perlu dirender ulang saat kondisinya berubah. Algoritma diff ini disebut “algoritma rekonsiliasi.”

Komponen Anak Dinamis

Saat merender komponen yang berisi daftar item, pengembang perlu menggunakan properti "kunci" unik yang dilampirkan ke komponen turunan. Nilai ini membantu algoritme diff untuk mengetahui apakah item perlu dirender ulang ketika data baru — atau status, seperti yang disebut di dunia React — diteruskan ke komponen. Algoritme rekonsiliasi memeriksa nilai kunci untuk melihat apakah item perlu ditambahkan atau dihapus. Apakah ini terasa familier setelah mengetahui tentang penggabungan data D3.js?

Sejak versi 0.14, React juga menyimpan renderer dalam modul terpisah. Dengan cara ini, kita dapat menggunakan komponen yang sama untuk merender di media yang berbeda, seperti aplikasi asli (React Native), realitas virtual (React VR) dan DOM (react-dom). Fleksibilitas ini mirip dengan cara kode D3.js dapat dirender dalam konteks yang berbeda, seperti SVG dan kanvas.

Bereaksi Dan D3.js

Baik React maupun D3 memiliki tujuan yang sama untuk membantu kita menangani DOM dan kompleksitasnya dengan cara yang sangat optimal. Mereka juga berbagi preferensi untuk fungsi murni — kode yang, untuk input tertentu, selalu mengembalikan output yang sama tanpa menimbulkan efek samping — dan komponen stateless.

Namun, kekhawatiran bersama tentang DOM membuat dua perpustakaan yang berpendirian ini berbenturan saat menentukan mana yang akan merender dan menganimasikan elemen antarmuka pengguna. Kita akan melihat berbagai cara untuk menyelesaikan perselisihan ini, dan tidak ada jawaban yang mudah. Namun, kami dapat menetapkan aturan yang sulit: Mereka tidak boleh berbagi kontrol DOM . Itu akan menjadi resep bencana.

Pendekatan

Saat mengintegrasikan React dan D3.js, kita dapat melakukannya pada level yang berbeda, lebih condong ke sisi D3.js atau sisi React. Mari kita lihat empat pilihan utama kita.

D3.js Dalam Bereaksi

Pendekatan pertama yang bisa kita ikuti adalah memberikan kode D3 kita sebanyak mungkin kendali DOM. Ini menggunakan komponen React untuk merender elemen SVG kosong yang berfungsi sebagai elemen root dari visualisasi data kita. Kemudian ia menggunakan metode siklus hidup componentDidUpdate untuk, menggunakan elemen root itu, membuat bagan menggunakan kode D3.js yang akan kita gunakan dalam skenario JavaScript vanilla. Kami juga dapat memblokir pembaruan komponen lebih lanjut dengan membuat metode shouldComponentUpdate untuk selalu mengembalikan 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)} /> } }

Mengevaluasi pendekatan ini, kami menyadari bahwa pendekatan ini menawarkan beberapa keuntungan dan kerugian. Di antara manfaatnya, ini adalah solusi sederhana yang berfungsi dengan baik hampir sepanjang waktu. Ini juga merupakan solusi paling alami ketika Anda mem-porting kode yang ada ke dalam React, atau ketika Anda menggunakan grafik D3.js yang sudah bekerja di tempat lain.

Pada sisi negatifnya, mencampurkan kode React dan kode D3.js dalam komponen React dapat terlihat sedikit kotor, menggabungkan terlalu banyak dependensi dan membuat file itu terlalu panjang untuk dianggap sebagai kode kualitas. Juga, implementasi ini tidak terasa React-idiomatic sama sekali. Terakhir, karena server render React tidak memanggil metode componentDidUpdate , kami tidak dapat mengirimkan versi grafik yang dirender dalam HTML awal.

Bereaksi Faux DOM

Diimplementasikan oleh Oliver Caldwell, React Faux DOM “adalah cara untuk menggunakan alat D3 yang ada tetapi merendernya melalui React dalam etos React.” Ini menggunakan implementasi DOM palsu untuk mengelabui D3.js agar berpikir itu berurusan dengan DOM nyata. Dengan cara ini, kami menyimpan pohon React DOM saat menggunakan D3.js di — hampir — semua potensinya.

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

Keuntungan dari pendekatan ini adalah memungkinkan Anda untuk menggunakan sebagian besar API D3.js, membuatnya mudah untuk diintegrasikan dengan kode D3.js yang sudah dibuat. Ini juga memungkinkan untuk rendering sisi server. Kelemahan dari strategi ini adalah kinerjanya kurang, karena kami menempatkan implementasi DOM palsu lainnya sebelum DOM virtual React, memvirtualisasikan DOM dua kali. Masalah ini membatasi penggunaannya untuk visualisasi data berukuran kecil dan menengah.

Pembungkus Metode Siklus Hidup

Pendekatan ini, pertama kali dikemukakan oleh Nicolas Hery, menggunakan metode siklus hidup yang ada dalam komponen React berbasis kelas. Ini secara elegan membungkus pembuatan, pembaruan, dan penghapusan grafik D3.js, menetapkan batas yang tajam antara kode React dan 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 adalah sesuatu seperti ini:

 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;

Pengkodean dengan cara ini menghasilkan komponen React ringan yang berkomunikasi dengan instance bagan berbasis D3.js melalui API sederhana (buat, perbarui, dan hapus), mendorong ke bawah metode panggilan balik apa pun yang ingin kita dengarkan.

Strategi ini mempromosikan pemisahan yang jelas dari masalah, menggunakan fasad untuk menyembunyikan detail implementasi bagan. Itu bisa merangkum grafik apa pun, dan antarmuka yang dihasilkan sederhana. Manfaat lainnya adalah mudah untuk diintegrasikan dengan kode D3.js yang sudah ditulis, dan memungkinkan kita untuk menggunakan transisi D3.js yang sangat baik. Kelemahan utama dari metode ini adalah rendering sisi server tidak memungkinkan.

Bereaksi untuk DOM, D3 untuk Matematika

Dalam strategi ini, kami membatasi penggunaan D3.js seminimal mungkin. Ini berarti melakukan perhitungan untuk jalur SVG, skala, tata letak, dan transformasi apa pun yang mengambil data pengguna dan mengubahnya menjadi sesuatu yang dapat kita gambar dengan React.

Penggunaan D3.js hanya untuk matematika dimungkinkan berkat sejumlah besar sub-modul D3.js yang tidak berhubungan dengan DOM. Jalur ini adalah yang paling ramah-React, memberikan perpustakaan Facebook aturan penuh atas DOM, sesuatu yang dilakukan dengan sangat baik.

Mari kita lihat contoh yang disederhanakan:

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

Teknik ini menjadi favorit para developer React berpengalaman karena konsisten dengan cara React. Selain itu, setelah diterapkan, membuat bagan dengan kodenya terasa luar biasa. Manfaat lain adalah rendering di sisi server, dan mungkin React Native atau React VR.

Paradoksnya, ini adalah pendekatan yang membutuhkan lebih banyak pengetahuan tentang cara kerja D3.js, karena kita perlu berintegrasi dengan sub-modulnya di level rendah. Kita harus mengimplementasikan kembali beberapa fungsi D3.js — sumbu dan bentuk yang lebih umum; kuas, zoom, dan seret mungkin yang paling sulit — dan ini menyiratkan sejumlah besar pekerjaan di muka.

Kita juga perlu mengimplementasikan semua animasi. Kami memiliki alat yang hebat di ekosistem React yang memungkinkan kami untuk mengelola animasi — lihat reaksi-transisi-grup, reaksi-gerakan, dan reaksi-gerakan — meskipun tidak satupun dari mereka memungkinkan kami untuk membuat interpolasi kompleks jalur SVG. Satu pertanyaan yang tertunda adalah bagaimana pendekatan ini dapat dimanfaatkan untuk membuat bagan menggunakan elemen kanvas HTML5.

Dalam diagram berikut, kita dapat melihat semua pendekatan yang dijelaskan sesuai dengan tingkat integrasi dengan React dan D3.js:

Pustaka React-D3.js

Saya telah melakukan beberapa penelitian tentang perpustakaan D3.js-React yang diharapkan akan membantu Anda ketika Anda menghadapi keputusan memilih perpustakaan untuk bekerja, berkontribusi atau bercabang. Ini berisi beberapa metrik subjektif, jadi tolong terima dengan sebutir garam.

Penelitian ini mengungkapkan bahwa, meskipun ada banyak perpustakaan, tidak banyak yang terpelihara. Sebagai pengelola sendiri, saya dapat memahami betapa sulitnya untuk mengikuti perubahan di satu perpustakaan utama dan bagaimana harus menjaga dua akan menjadi tugas yang menakutkan.

Juga, jumlah perpustakaan siap produksi (dari versi 1.0.0 dan lebih tinggi) masih cukup rendah. Mungkin ada hubungannya dengan jumlah pekerjaan yang diperlukan untuk mengirimkan perpustakaan jenis ini.

Mari kita lihat beberapa favorit saya.

Kemenangan

Sebuah proyek oleh perusahaan konsultan Formidable Labs, Victory adalah pustaka komponen tingkat rendah dari elemen bagan. Karena karakteristik tingkat rendah itu, komponen Victory dapat disatukan dengan konfigurasi yang berbeda untuk membuat visualisasi data yang kompleks. Di bawah tenda, itu mengimplementasikan kembali fitur D3.js seperti kuas dan zoom, meskipun menggunakan interpolasi d3 untuk animasi.

Menggunakannya untuk diagram garis akan terlihat seperti ini:

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

Itu menghasilkan diagram garis seperti ini:

Memulai dengan Victory itu mudah, dan memiliki beberapa bonus bagus, seperti zoom dan wadah Voronoi untuk tooltips. Ini adalah perpustakaan yang trendi, meskipun masih dalam status pra-rilis dan memiliki banyak bug yang tertunda. Victory adalah satu-satunya perpustakaan saat ini yang dapat Anda gunakan dengan React Native.

Rechart

Dipoles secara estetis, dengan pengalaman pengguna yang menyenangkan, animasi yang halus dan tooltip yang tampak hebat, Recharts adalah salah satu perpustakaan React-D3.js favorit saya. Rechart hanya menggunakan skala d3, interpolasi d3 dan bentuk d3. Ini menawarkan tingkat perincian yang lebih tinggi daripada Victory, membatasi jumlah visualisasi data yang dapat kami buat.

Menggunakan Recharts terlihat seperti ini:

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

Pustaka ini juga diuji dengan sangat baik, dan meskipun masih dalam versi beta, ia menampilkan beberapa bagan biasa, bagan radar, peta pohon, dan bahkan kuas. Anda dapat memeriksa contohnya untuk melihat lebih banyak. Pengembang yang berkontribusi pada proyek ini bekerja serius, mencapai animasi yang mulus dengan proyek animasi mereka yang bereaksi mulus.

Nivo

Nivo adalah pustaka grafik React-D3.js tingkat tinggi. Ini menawarkan banyak opsi untuk rendering: SVG, kanvas, bahkan versi HTML berbasis API dari bagan yang ideal untuk rendering sisi server. Ini menggunakan React Motion untuk animasi.

API-nya sedikit berbeda, karena hanya menampilkan satu komponen yang dapat dikonfigurasi untuk setiap bagan. Mari kita lihat contohnya:

 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 melakukan pekerjaan yang luar biasa dengan Nivo. Dokumentasinya bagus dan demo-nya dapat dikonfigurasi. Karena tingkat abstraksi yang lebih tinggi dari perpustakaan ini, sangat mudah digunakan, dan kami dapat mengatakan bahwa itu menawarkan lebih sedikit potensi untuk pembuatan visualisasi. Fitur bagus dari Nivo adalah kemungkinan untuk menggunakan pola dan gradien SVG untuk mengisi grafik Anda.

VX

VX adalah kumpulan komponen visualisasi tingkat rendah untuk membuat visualisasi. Itu tidak beropini dan seharusnya digunakan untuk menghasilkan perpustakaan charting lain atau apa adanya.

Mari kita lihat beberapa kode:

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

Mengingat perincian tingkat rendah ini, saya menganggap VX sebagai D3.js untuk dunia React. Ini agnostik tentang perpustakaan animasi yang ingin digunakan pengguna. Saat ini, masih dalam versi beta awal, meskipun sedang digunakan dalam produksi oleh Airbnb. Kekurangannya saat ini adalah kurangnya dukungan untuk interaksi seperti menyikat dan memperbesar.

Reaksi Britecharts

Britecharts React masih dalam versi beta, dan ini adalah satu-satunya library yang menggunakan pendekatan lifecycle method-wrapping. Ini bertujuan untuk memungkinkan penggunaan visualisasi Britecharts di React dengan membuat pembungkus kode yang mudah digunakan.

Berikut adalah kode sederhana untuk diagram garis:

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

Saya tidak bisa objektif tentang yang satu ini. Britecharts React dapat digunakan sebagai scaffold untuk merender grafik D3.js Anda sebagai komponen React. Itu tidak mendukung rendering sisi server, meskipun kami telah menyertakan status pemuatan untuk mengatasi ini dalam beberapa cara.

Jangan ragu untuk memeriksa demo online dan bermain dengan kodenya.

Memilih Pendekatan Atau Perpustakaan

Saya telah mengelompokkan pertimbangan dalam membangun aplikasi dengan grafik ke dalam empat kategori: kualitas, waktu, ruang lingkup, dan biaya. Mereka terlalu banyak, jadi kita harus menyederhanakannya.

Katakanlah kita memperbaiki kualitas . Kami dapat bertujuan untuk memiliki basis kode yang teruji dengan baik, mutakhir dengan D3.js versi 4 dan dengan dokumentasi yang komprehensif.

Jika kita berpikir tentang waktu , pertanyaan yang berguna untuk ditanyakan pada diri sendiri adalah, “Apakah ini investasi jangka panjang?” Jika jawabannya "ya", maka saya akan menyarankan Anda untuk membuat perpustakaan berdasarkan D3.js dan membungkusnya dengan React menggunakan pendekatan metode siklus hidup. Pendekatan ini memisahkan kode kami dengan teknologi dan lebih tahan waktu.

Jika, sebaliknya, proyek memiliki tenggat waktu yang ketat dan tim tidak perlu mempertahankannya untuk waktu yang lama, saya sarankan untuk mengambil perpustakaan React-D3.js atau D3.js yang paling dekat dengan spesifikasi, fork dan gunakan itu , mencoba untuk berkontribusi di sepanjang jalan.

Ketika kita berurusan dengan ruang lingkup , kita harus memikirkan apakah yang kita butuhkan adalah sejumlah kecil grafik dasar, visualisasi kompleks satu kali atau beberapa grafik yang sangat disesuaikan. Dalam kasus pertama, saya akan kembali memilih perpustakaan terdekat dengan spesifikasi dan memotongnya. Untuk visualisasi data dipesan lebih dahulu yang berisi banyak animasi atau interaksi, membangun dengan D3.js biasa adalah pilihan terbaik. Terakhir, jika Anda berencana untuk menggunakan bagan yang berbeda dengan spesifikasi tertentu — mungkin dengan dukungan UX dan desainer — maka membuat pustaka D3 Anda dari awal atau melakukan forking dan menyesuaikan pustaka yang ada akan bekerja paling baik.

Akhirnya, sisi biaya keputusan terkait dengan anggaran dan pelatihan tim. Apa jenis keterampilan yang dimiliki tim Anda? Jika Anda memiliki pengembang D3.js, mereka akan lebih memilih pemisahan yang jelas antara D3.js dan React, jadi mungkin pendekatan menggunakan pembungkusan metode siklus hidup akan bekerja dengan baik. Namun, jika tim Anda sebagian besar adalah pengembang React, mereka akan senang memperluas salah satu library React-D3.js saat ini. Selain itu, menggunakan metode siklus hidup bersama dengan contoh D3.js dapat berhasil. Yang jarang saya rekomendasikan adalah menggulirkan library React-D3.js Anda sendiri. Jumlah pekerjaan yang diperlukan di muka sangat menakutkan, dan kecepatan pembaruan kedua perpustakaan membuat biaya pemeliharaan menjadi tidak sepele.

Ringkasan

React dan D3.js adalah alat yang hebat untuk membantu kami menangani DOM dan tantangannya. Mereka pasti bisa bekerja sama, dan kita diberdayakan untuk memilih di mana harus menarik garis di antara mereka. Ekosistem perpustakaan yang sehat ada untuk membantu kami menggunakan D3.js. Banyak pilihan menarik yang tersedia untuk React-D3.js juga, dan kedua perpustakaan terus berevolusi, jadi proyek yang menggabungkan keduanya akan sulit untuk mengikutinya.

Memilih akan bergantung pada begitu banyak variabel yang tidak semuanya dapat dijelaskan dalam satu artikel. Namun, kami membahas sebagian besar pertimbangan utama, semoga memberdayakan Anda untuk membuat keputusan berdasarkan informasi Anda sendiri.

Dengan yayasan ini, saya mendorong Anda untuk penasaran, memeriksa perpustakaan yang disebutkan dan menambahkan beberapa kebaikan bagan ke proyek Anda.

Sudahkah Anda menggunakan salah satu dari proyek ini? Jika pernah, bagaimana pengalaman Anda? Bagikan beberapa kata dengan kami di komentar.