Pertanyaan D3 javascript Perbedaan antara foreach dan masing-masing


Apa perbedaan antara forEach dan each di D3js?


76
2017-11-20 02:36


asal


Jawaban:


Pertama, .forEach() bukan bagian dari d3, itu adalah fungsi asli dari javascript array. Begitu,

["a", "b", "c"].forEach(function(d, i) { console.log(d + " " + i); });
// Outputs:
a 0
b 1
c 2

Dan itu berfungsi bahkan jika d3 tidak dimuat di halaman.

Selanjutnya, d3 .each() bekerja pada pilihan d3 (apa yang Anda dapatkan ketika Anda d3.selectAll(...)). Secara teknis, Anda bisa menelepon .forEach() pada pilihan d3, karena di belakang layar, seleksi d3 adalah array dengan fungsi tambahan (salah satunya adalah .each()). Tetapi Anda tidak seharusnya melakukan itu karena:

  1. Melakukan hal itu tidak akan menghasilkan perilaku yang diinginkan. Tahu cara menggunakannya .forEach() dengan pemilihan d3 untuk menghasilkan perilaku yang diinginkan akan membutuhkan pemahaman yang mendalam tentang cara kerja bagian dalam d3. Jadi mengapa melakukannya, jika Anda hanya dapat menggunakan bagian publik yang didokumentasikan dari API.

  2. Ketika Anda menelepon .each(function(d, i) { }) pada pilihan d3, Anda mendapatkan lebih dari sekadar d dan i: fungsi dipanggil seperti itu this kata kunci di mana saja di dalam fungsi itu mengarah ke elemen HTML DOM yang terkait dengannya d. Dengan kata lain console.log(this) dari dalam function(d,i) {} akan mencatat sesuatu seperti <div class="foo"></div> atau elemen html apa pun itu. Dan itu berguna, karena Anda dapat memanggil fungsi ini this objek dalam rangka mengubah properti CSS, konten atau apa pun. Biasanya, Anda menggunakan d3 untuk mengatur properti ini, seperti pada d3.select(this).style('color', '#c33');.

Takeaway utama adalah, menggunakan .each() Anda mendapat akses ke 3 hal yang Anda butuhkan: d, this dan i. Dengan .forEach(), pada array (seperti pada contoh dari awal) Anda hanya mendapatkan 2 hal (d dan i), dan Anda harus melakukan banyak pekerjaan untuk juga mengaitkan elemen HTML dengan 2 hal tersebut. Dan itu, antara lain, bagaimana d3 berguna.


160
2017-11-20 04:50