Apakah ada perpustakaan Canvas yang seperti d3.js (adalah perpustakaan svg). Saya memiliki situs web di sini dan saya mengkodekan grafik dengan elemen svg namun tidak efisien pada browser ponsel pintar dan bekerja sangat lambat. Saya sekarang ingin mengubahnya dengan jenis kanvas 2d dan melihat apakah lebih baik atau tidak. Bisakah Anda menyarankan perpustakaan kanvas yang berguna untuk tujuan ini?
Terima kasih...
D3 belum tentu merupakan perpustakaan khusus svg - svg digunakan dalam banyak kasus, namun perpustakaan dapat melakukan segala jenis representasi yang ingin Anda buat. Lihat contoh koordinat paralel menggunakan kanvas di D3, oleh Kai Chang: http://bl.ocks.org/2409451
Lihat juga di sini untuk beberapa diskusi tentang masalah kinerja, dll, yang mungkin berguna: https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion
Saya tahu saya terlambat ke pesta, namun waktu telah berubah, dan saya yakin pertanyaan ini layak mendapat jawaban terbaru. Kinerja SVG telah meningkat pesat selama bertahun-tahun dan terutama untuk visualisasi seperti grafik yang tidak sepele, SVG sering kali memberikan kinerja yang unggul; namun hal ini sangat bergantung pada kasus penggunaan sebenarnya: Jika visualisasinya sederhana dan terdiri dari ribuan elemen, terutama di perangkat seluler, Canvas mungkin merupakan opsi yang lebih cepat. Jika visualisasinya hampir sepele, WebGL memberikan kinerja terbaik dan mengalahkan Canvas - terutama di perangkat seluler!
Namun WebGL khususnya dan juga Canvas sedikit lebih sulit digunakan dibandingkan pendekatan deklaratif yang digunakan SVG. Hal-hal seperti animasi dan transisi CSS mudah dilakukan dengan SVG dan memberikan kinerja yang baik karena akselerasi perangkat keras dan sepenuhnya tidak bergantung pada kinerja JavaScript. Canvas dan WebGL selalu membutuhkan JavaScript.
Jika Anda melihat pustaka gambar grafik komersial yFiles untuk HTML Anda akan melihat bahwa perpustakaan tersebut menawarkan ketiga teknologi tersebut pada saat yang sama. Ini karena ketiganya bisa menjadi pilihan terbaik, bergantung pada kasus penggunaan sebenarnya.
Ada entri blog yang membandingkan performa SVG, Canvas, dan WebGL khususnya dalam konteks visualisasi grafik. Ini membandingkan berbagai ukuran grafik dan kategori perangkat. “Kesimpulannya” adalah tidak ada pemenang yang jelas. Seringkali kombinasi ketiga teknologi tersebut memberikan hasil terbaik. Namun, untuk grafik yang lebih kecil, SVG seringkali memberikan hasil yang sangat baik dan menyenangkan untuk digunakan. Itu juga alasan mengapa d3.js fokus pada SVG, daripada Canvas dan WebGL, menurut saya.
Ada demo interaktif yang ditautkan dari entri blog tersebut yang memungkinkan Anda bermain dengan berbagai teknologi dan melihat kekuatan dan kelemahan mereka. Tentu saja demo ini terutama membandingkan tiga teknologi yang digunakan di perpustakaan tertentu sehingga hasil Anda mungkin berbeda, tetapi mereka menghabiskan banyak waktu untuk mengoptimalkan ketiga teknologi di perpustakaan itu, jadi menurut saya hasilnya tidak terlalu bias.
Penafian: Saya bekerja untuk perusahaan yang membuat perpustakaan yang disebutkan di atas, namun saya tidak mewakili perusahaan saya di sini di SO. Saya pikir apa yang saya katakan seharusnya berlaku bukan hanya untuk perpustakaan itu saja.
Untuk aplikasi facebook Samsung Olympic Genome Project, kami menggunakan http://thejit.org untuk membuat animasi gaya grafik yang diarahkan secara paksa untuk aplikasi. Tentu saja, ini banyak dimodifikasi oleh saya dan orang lain di tim saya, dan hanya memainkan peran yang sangat kecil dalam aplikasi, tetapi ini merupakan kerangka kerja yang cukup kuat.
Chart.js adalah perpustakaan javascript yang baru saja keluar yang membuat grafik menggunakan HTML5 untuk rendering. Ini bukan fitur inklusif seperti D3, tetapi ia berupaya untuk menjadi seperti itu di masa depan. http://www.chartjs.org/
Lihatlah Cytoscape.JS yang menggunakan kanvas HTML5 untuk rendering. Pada saat artikel ini ditulis, proyek ini masih dalam tahap awal tetapi proyek ini tampaknya menjanjikan. Menurut wiki-nya, perpustakaan mendukung browser desktop dan seluler:
Cytoscape.js mudah diintegrasikan ke dalam aplikasi web Anda, terutama karena Cytoscape.js mendukung browser desktop, seperti Chrome, dan browser seluler, seperti di iPad.
