Temelde yakınlaştırılabilir, kaydırılabilir bir grafikte binlerce noktayı oluşturan bir projeyi güncellemek için kullanılacak doğru teknolojiyi seçmeye çalışıyorum. Protovis kullanan mevcut uygulama düşük performans gösteriyor. Buradan kontrol edin:
http://www.planethunters.org/classify
Tamamen uzaklaştırıldığında yaklaşık 2000 nokta vardır. Biraz yakınlaştırmak için alttaki tutamaçları kullanmayı deneyin ve kaydırmak için sürükleyin. Oldukça dalgalı olduğunu göreceksiniz ve gerçekten hızlı bir bilgisayarınız olmadıkça CPU kullanımınızın muhtemelen bir çekirdekte% 100'e kadar çıktığını göreceksiniz. Odak alanındaki her değişiklik, oldukça yavaş olan ve daha fazla nokta çizildiğinde daha kötü olan protovise yeniden çizim çağrısı yapar.
Arayüzde bazı güncellemeler yapmak ve altta yatan görselleştirme teknolojisini animasyon ve etkileşimle daha duyarlı olacak şekilde değiştirmek istiyorum. Aşağıdaki makaleden, seçim başka bir SVG tabanlı kitaplık veya tuval tabanlı bir kitaplık arasında gibi görünüyor:
http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/
Protovis'ten çıkan d3.js, SVG tabanlıdır ve animasyonları oluşturmada daha iyi olması gerekir . Bununla birlikte, ne kadar daha iyi ve performans tavanının ne olduğu konusunda şüpheliyim. Bu nedenle, KineticJS gibi tuval tabanlı bir kitaplık kullanarak daha eksiksiz bir revizyon yapmayı da düşünüyorum . Bununla birlikte, bir yaklaşımı veya diğerini çok fazla kullanmadan önce, bu kadar veriye sahip benzer bir web uygulaması yapmış birinden haber almak ve fikirlerini almak isterim.
En önemli şey performanstır, ikincil olarak diğer etkileşim özelliklerini ekleme ve animasyonu programlama kolaylığına odaklanır. Her birinde bu küçük hata çubuklarıyla aynı anda 2000'den fazla nokta olmayacaktır. Yakınlaştırma, uzaklaştırma ve gezinme işlemlerinin düzgün olması gerekir. En son SVG kitaplıkları bu konuda yeterliyse, belki de d3'ü kullanmanın kolaylığı, KineticJS vb. İçin artan kurulumdan daha ağır basacaktır. Ancak, özellikle daha yavaş bilgisayarlara sahip kişiler için bir tuval kullanmanın büyük bir performans avantajı varsa, o zaman ben kesinlikle böyle gitmeyi tercih eder.
SVG kullanan, ancak yine de kabul edilebilir derecede sorunsuz bir şekilde animasyon uygulayan NYTimes tarafından yapılan uygulama örneği: http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . Bu performansı elde edebilirsem ve kendi tuval çizim kodumu yazmak zorunda kalmazsam, muhtemelen SVG'ye giderim.
Bazı kullanıcıların tuval oluşturmayla birlikte bir d3.js manipülasyonu kullandığını fark ettim . Ancak, bununla ilgili çok fazla belge bulamıyorum veya bu yazının OP'si ile iletişime geçemiyorum. Bu tür bir DOM-to-Canvas ( demo , kod ) uygulaması olan varsa, sizden de haber almak isterim. Verileri işleyebilmenin ve nasıl işleneceği (ve dolayısıyla performansın) üzerinde özel kontrole sahip olmanın iyi bir karması gibi görünüyor, ancak her şeyi DOM'a yüklemek zorunda kalmanın hala işleri yavaşlatıp yavaşlatmayacağını merak ediyorum.
Buna benzer bazı mevcut sorular olduğunu biliyorum, ancak hiçbiri tam olarak aynı şeyi sormuyor. Yardımınız için teşekkürler.
Takip : Kullanmayı sonlandırdığım uygulama https://github.com/zooniverse/LightCurves adresinde