Protovis ve D3.js


84

TLDR: İkisi arasındaki farkları aydınlatmak için hem protovis hem de D3.js deneyimi olan var mı?

Son 2 haftadır protovis ile oynuyorum ve şimdiye kadar harikaydı. Şu an hariç, animasyonla bir tuğla duvara çarpmış gibiyim.

protovis: http://vis.stanford.edu/protovis/

Oldukça basit bir animasyon yapmak istiyorum ama protovis ile sezgisel olmaktan çok daha az hissettiriyor - protovisin asla gerçekten animasyon için tasarlanmadığını düşünmeye başlıyorum. D3.js'ye bakmaya başladım:

http://mbostock.github.com/d3/ex/stack.html

Çok benzer görünüyor, ancak:

  • Daha hafif görünüyor
  • SVG'nin yanı sıra diğer DOM öğeleriyle etkileşime girmeye uygun görünüyor
  • Animasyon eklemeye uygun görünüyor

Herhangi biri diğer farklılıkları aydınlatabilir mi?

Tüm girdiler için çok minnettar olurum

Yanıtlar:


117

Protovis ile oldukça fazla çalışma ve D3 ile birkaç şey yaptım. Bahsettiğiniz noktaların yanı sıra bence şu farklılıklar da öne çıkıyor:

  • Bu yüzden yerine - Protovis sen belirterek ediyoruz görsel özellikleri arasında basitleştirilmiş soyutlama katmanı sağlar durumlarda, D3 fiili CSS ve DOM gözlük kullanan .width(10)veya .fillStyle('#00C')kullanmak istiyorum .style('width', 10)ya .attr('fill', '#00C'). Bu örneklerde, fark oldukça önemsizdir, ancak bir SVG görüntüsünde çizgi çizmek gibi bir şey yaptığınızda, büyük farklar vardır. Sonuç, D3'ü kullanmak biraz daha düşük seviyede hissettirebilir - daha fazla kontrole sahip olursunuz, ancak Protovis'in çok daha kolay yaptığı bazı şeyleri yapmak için SVG sözdizimine oldukça aşina olmanız gerekir.

  • Dikkat edeceğiniz gibi, Protovis'in tamamı SVG'de işlenirken, D3 DOM'un diğer bölümlerini kullanabilir. Bu, SVG tabanlı görsel öğeler gerektirmeyen görselleştirmeler için SVG'yi desteklemeyen tarayıcılarla bile D3'ü kullanabileceğiniz anlamına gelir. Bu aynı zamanda HTML ve SVG'yi aynı görselleştirmeye entegre etmenin çok daha kolay olduğu anlamına gelir; bu, metinle uğraşmak gibi şeyler için gerçekten iyidir (Protovis'te metin işleme ve düzen oldukça zayıftır).

  • D3, ölçekler ve veri işleme gibi bazı temel Protovis yardımcı programlarını değiştirir veya bırakır. Bazılarının iki kütüphane arasında paylaşılmasına rağmen, D3 gibi temel yardımcı programların pv.sum()veya pv.mean()D3 eşdeğerlerinin bulunmamasından defalarca rahatsız oluyorum .nest(). Düzenleme 10/1/12: D3 veri araçları dolduran ve Protovis içerir ve D3 değil, mesela o hala birkaç vardır gelmiştir pv.dict, pv.numerateve pv.repeat. Muhtemelen, daha az genel olarak faydalı oldukları düşünüldüğü için dışarıda bırakıldılar.

  • D3, eşzamansız istekler için yardımcı programlar sağlar. Protovis'te bunu istediğimde, genellikle harici bir kitaplık (yani jQuery) kullanmam gerekiyor.

  • D3 API belgeleri, Protovis için oldukça ayrıntılı belgelere kıyasla neredeyse tamamen eksiktir . Düzenleme (30.08.2013) : D3 artık GitHub'da eksiksiz ve ayrıntılı API belgelerine sahip , bu nedenle bu nokta artık geçerli değil.

  • Son olarak, animasyonla pek bir şey yapmadım ama bence tamamen haklısınız - D3, özellikle animasyonlu geçişler açısından Protovis'ten daha fazla animasyon desteği sağlıyor. Protovis, görselleştirmenin bir kısmını veya tamamını talep üzerine yeniden oluşturabilir, ancak sınırlı süreli bir animasyonda ilerlemek için herhangi bir desteği yoktur - hepsini elle kodlamanız gerekir setInterval. D3 bunu kütüphanenin çok daha ayrılmaz bir parçası yapıyor gibi görünüyor.

Düzenleme (7/12/11) : Görünüşe göre yeni bir büyük fark var - 28 Haziran 2011 itibarıyla Protovis artık aktif geliştirme aşamasında değil ve Protovis ekibi bunun yerine D3.js'yi zorluyor. Son sürüm oldukça kararlı, bu yüzden onu kullanmaktan alıkoymamalı, ancak kesinlikle dikkate alınması gereken bir nokta.


Üçüncü nokta hariç oldukça doğru. Bir Protovis grafiğini rastgele bir HTML öğesine gömebilirsiniz.
Geoff

@Jeff - Davayı abartmış olabilirim. D3'ün keyfi öğelerle çalışması amaçlanırken , bunu Protovis (AFAIK) ile yapmak, kurulu API dışında çalışmayı gerektirir (örneğin, kök $domözelliğini ayarlayarak ). Bu noktayı azaltacağım.
nrabinowitz

1
@Jeff - İkinci kez düşündüğümde, bu noktayı tamamen atlıyorum - bir şekilde Panel#canvasmülkü hiç fark etmemiştim . Not için teşekkürler.
nrabinowitz

Ayrıntılı yanıt için çok teşekkürler - bu gerçekten yardımcı oldu
Yazan Richard Powell

2
Mart 2013'ten bu yana, D3'ün v3'ü için API referansı tamamlanmış gibi görünüyor ve gerçekten iyi bir izlenim bırakıyor. Ek olarak, çok sayıda öğretici ve güzel örnekler içeren iyi bir dokümantasyon var.
Mobiletainment

32

D3 ve Protovis arasındaki farkları biraz ayrıntılı olarak ele alan bir eğitim var . @ Nrabinowitz'in açıklamasına katılıyorum, ancak yakın zamanda kapsamlı API dokümantasyonu eklediğimizi belirteceğim .


1
Evet, bunu dün fark ettim (çok takdir edildi!). Cevabımı gelecek nesil için güncelleyeceğim :).
nrabinowitz

6

Protovis / d3.js Yazarları tarafından 2011'de yayınlanan http://vis.stanford.edu/files/2011-D3-InfoVis.pdf esas olarak d3.js hakkında ancak belirli bir şekilde değişmelerinin nedenlerinden bazılarını içeren yakın tarihli bir makale var. Protovis'ten d3.js'ye giden şeyler


O kağıdı faydalı buldum . Herhangi bir test yapmadan, bana bir verir takdir çalıştığını nerede ve nerede 's kusurlu. Teşekkürler.
Mike Gale
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.