d3 component

Komponen D3

Abstraksi komponen ringan untuk D3.Js.

Fitur:

• Merangkum pola pembaruan umum.
• Komponen fungsional yang dapat dikomposisi (bahkan rekursif!).
• destroy hook yang andal untuk membersihkan semuanya.
• Bekerja sangat baik dengan Redux.

Contoh:

Posting | Versi ES6	Pemintal | Versi ES6	Stopwatch (redux) | Versi ES6
Penghitung (redux) | Versi ES6	Todos	Plot pencar dengan menu (redux) Versi ES6 | Varian Pilih Radius
Jam	Jam bandara	contoh-viewer (redux, es6)
Fractal Pie Chart (ES6)

Dengan menggunakan abstraksi komponen ini, Anda dapat dengan mudah merangkum komponen antarmuka pengguna yang digerakkan data sebagai "kotak-kotak-dalam-kotak" konseptual, mengisolasi masalah untuk berbagai tingkat pohon DOM Anda. Abstraksi komponen ini serupa dalam konsep dan fungsionalitas untuk bereaksi komponen fungsional tanpa kewarganegaraan. Segala sesuatu yang dibutuhkan komponen untuk membuat dirinya dan berinteraksi dengan keadaan aplikasi diturunkan melalui pohon komponen pada waktu render. Komponen tidak menyimpan negara bagian setempat; Ini adalah perbedaan utama antara komponen D3 dan pola grafik yang dapat digunakan kembali. Tidak ada perlakuan khusus yang diberikan pada peristiwa atau delegasi acara, karena yang dimaksudkan digunakan dalam arsitektur aliran data searah seperti Redux.

Menginstal

Jika Anda menggunakan NPM, npm install d3-component . Jika tidak, unduh rilis terbaru. Anda juga dapat memuat langsung dari UNPKG.com sebagai perpustakaan mandiri. Lingkungan AMD, CommonJS, dan Vanilla didukung. Di Vanilla, d3 Global diekspor:

 < script src =" https://unpkg.com/d3@4 " > </ script >
< script src =" https://unpkg.com/d3-component@3 " > </ script >
< script >
  var myComponent = d3 . component ( "div" ) ;
</ script > 

Referensi API

Catatan: Ada rilis versi utama baru -baru ini, dan bersamaan dengan itu ada perubahan API yang substansial.

Singkatnya, API terlihat seperti ini:

 var myComponent = d3 . component ( "div" , "some-class" )
  . create ( ( selection , d , i ) => { ... } ) // Invoked for entering component instances.
  . render ( ( selection , d , i ) => { ... } ) // Invoked for entering AND updating component instances.
  . destroy ( ( selection , d , i ) => { ... } ) ; // Invoked for exiting instances, may return a transition.

// To invoke the component,
d3 . select ( "body" ) // create a selection with a single element,
  . call ( myComponent , "Hello d3-component!" ) ; // then use selection.call().

Untuk melihat API lengkap beraksi, lihat contoh "Hello D3-Component" ini.

# komponen ( tagName [, className ])))

Membuat generator komponen baru yang mengelola dan diterjemahkan ke dalam elemen DOM dari tagname yang ditentukan.

Parameter opsional ClassName menentukan nilai atribut class pada elemen DOM yang dikelola.

# komponen . buat ( fungsi (seleksi, d, i) )

Menetapkan fungsi Buat generator komponen ini, yang akan dipanggil setiap kali instance komponen baru dibuat, dilewatkan pilihan yang berisi elemen DOM saat ini, datum saat ini ( D ), dan indeks datum saat ini ( i ).

# komponen . render ( fungsi (seleksi, d, i) )

Mengatur fungsi render dari generator komponen ini. Fungsi ini akan dipanggil untuk setiap instance komponen selama rendering, dilewatkan seleksi yang berisi elemen DOM saat ini, datum saat ini ( D ), dan indeks datum saat ini ( i ).

# komponen . hancurkan ( fungsi (seleksi, d, i) )

Mengatur fungsi hancur dari generator komponen ini, yang akan dipanggil setiap kali instance komponen dihancurkan, dilewatkan seleksi yang berisi elemen DOM saat ini, datum saat ini ( D ), dan indeks datum saat ini ( i ).

Ketika instance komponen dihancurkan, fungsi hancur dari semua anaknya juga dipanggil (rekursif), sehingga Anda dapat yakin bahwa fungsi ini akan dipanggil sebelum instance kompoen dihapus dari DOM.

Fungsi Destroy dapat secara opsional mengembalikan transisi, yang akan menunda penghapusan elemen DOM sampai setelah transisi selesai (tetapi hanya jika instance komponen induk tidak dihancurkan). Instance komponen yang sangat bersarang mungkin menghapus node DOM mereka sebelum transisi selesai, jadi sebaiknya tidak bergantung pada simpul DOM yang ada setelah transisi selesai.

# komponen . kunci ( fungsi )

Mengatur fungsi kunci yang digunakan dalam data internal bergabung saat mengelola elemen DOM untuk instance komponen. Menentukan fungsi kunci adalah opsional (indeks array digunakan sebagai kunci secara default), tetapi akan membuat rendere ulang lebih efisien dalam kasus di mana array data diatur ulang atau disambung dari waktu ke waktu.

# komponen ( seleksi [, data [, konteks ]])

Membuat komponen ke seleksi yang diberikan, pilihan D3 yang berisi elemen DOM tunggal. Elemen DOM mentah juga dapat dilewati sebagai argumen seleksi . Mengembalikan pilihan D3 yang berisi pilihan Enter dan Perbarui untuk instance komponen.

• Jika data ditentukan dan merupakan array, satu instance komponen akan diberikan untuk setiap elemen array, dan fungsi render akan menerima elemen tunggal dari array data sebagai argumen D -nya.
  • Kasus yang bermanfaat: Jika data ditentukan sebagai array kosong [] , semua instance komponen yang diberikan sebelumnya akan dihapus.
• Jika data ditentukan dan bukan array, tepatnya satu instance komponen akan diberikan, dan fungsi render akan menerima nilai data sebagai argumen D -nya.
• Jika data tidak ditentukan, tepatnya satu instance komponen akan diberikan, dan fungsi render akan menerima undefined sebagai argumen D -nya.

Singkatnya, komponen dapat diberikan menggunakan tanda tangan berikut:

• selection.call(myComponent, dataObject) → Satu instance, render Function D akan menjadi dataObject .
• selection.call(myComponent, dataArray) → dataArray.length Instances, Render Function D akan menjadi dataArray[i]
• selection.call(myComponent) → satu instance, render function D akan undefined .

Jika objek konteks ditentukan, setiap elemen data dalam array data akan digabungkan menjadi objek baru yang prototipenya adalah objek konteks , dan array yang dihasilkan akan digunakan sebagai pengganti array data . Ini berguna untuk melewati fungsi panggilan balik melalui pohon komponen Anda. Untuk mengklarifikasi, dua doa berikut setara:

 var context = {
  onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray . map ( function ( d ) {
  return Object . assign ( Object . create ( context ) , d ) ;
} ) ) ; 

 var context = {
  onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray , context ) ;