Temelde bakıştan, pannable bir grafikte noktaları binlerce işleyen bir proje güncelleştirmek için kullanmak için doğru teknolojiyi seçmek için çalışıyorum. Geçerli uygulama, Protovis kullanarak, underperformant. Buraya göz atın:

http://www.planethunters.org/classify

Tamamen uzaklaştırıldığında yaklaşık 2000 puan var. Bu altında bir bit yakınlaştırmak ve kaydırmak için sürükleyin için kolları kullanmayı deneyin. Oldukça dalgalı olduğunu görürsünüz ve CPU kullanımı muhtemelen çok hızlı bir bilgisayar yoksa, bir çekirdekte 0'e kadar gider. Odak alanı için her değişim çok yavaş olduğu protovis için yeniden çağırır ve daha fazla puan çizilmiş kötü.

Arabirimi için bazı güncellemeler yapmak gibi temel görselleştirme teknolojisini değiştirmek için animasyon ve etkileşim ile daha duyarlı olmasını istiyorum. Aşağıdaki makalede, seçim SVG tabanlı bir kütüphane, ya da bir tuval tabanlı bir: başka bir arasında gibi görünüyor

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

Protovis dışında büyüdü d3.js,, SVG tabanlı ve supposed to be better at rendering animations. Ancak, çok daha iyi ve performans tavanı ne kadar şüpheli değilim. Bu nedenle, aynı zamanda daha kapsamlı bir elden geçirme KineticJS gibi tuval tabanlı bir kütüphane kullanmayı düşünüyorum. Çok uzak bir yaklaşım veya başka kullanarak girmeden önce, ancak, bu kadar veri ile benzer bir web uygulaması yapmış birinden duymak ve fikirlerini almak istiyorum.

En önemli şey performans, diğer etkileşim özellikleri eklemek ve animasyon programlama kolaylığı ikincil bir odak ile. Muhtemelen aynı anda 2000 puan fazla, her biri küçük bir hata payı ile olacak., Uzaklaştırma ve etrafında kaydırma pürüzsüz olması gerekir.Eğer en son SVG kütüphaneler bu işte iyi iseniz, o zaman belki d3 kullanma kolaylığı KineticJS, vb için artan Kur daha ağır olacaktır. Ama eğer bir tuval kullanarak büyük bir performans avantajı ise, özellikle yavaş bilgisayarlar ile insanlar için, o zaman kesinlikle bu şekilde gitmeyi tercih ederim.

Uygulama örneği SVG kullanır, ama yine de kabul edilebilir sorunsuz şekilde hareket ettiğini NYTimes tarafından yapılmış: http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . Eğer bu performansı ve kendi tuval çizim kod yazmak zorunda değil miyim, muhtemelen SVG için giderdim.

Bazı kullanıcılar d3.js manipulation combined with canvas rendering bir melez kullanmış olduğunu fark ettim. Ancak, bu online belgeleri hakkında pek bir şey bulamıyorum ya bu post OP ile temasa. Eğer kimse herhangi bir deneyimi DOM-Tuval tür (, ** 7 ** 8) Bu uygulama yapmak varsa, sizden de duymak isterim. Görünüşe göre iyi bir melez olması mümkün nasýl veri ve özel denetim üzerinde nasıl oluşturmak için (ve bu nedenle performans), ama merak ediyorum eğer yük olan her şeyi içine DOM olduğunu hala işleri yavaşlatır.

Buna benzer bazı sorular mevcut olduğunu biliyorum, ama bunların hiçbiri tam olarak aynı şeyi isteyin. Yardımlarınız için teşekkürler.

Takip: Yukarı kullandım uygulanması https://github.com/zooniverse/LightCurves

Neyse ki, 2000 daireler çizmeye test etmek için oldukça kolay bir örnektir. Burada Tuval ve SVG dört olası uygulamaları, her iki:

• Canvas geometric zooming
• Canvas semantic zooming
• SVG geometric zooming
• SVG semantic zooming

Bu örnekler D3 zoom behavior yakınlaştırma ve kaydırma uygulamak için kullanın. Kenara daireler Canvas veya SVG olarak işlenmiş olup, diğer önemli ayrım kullanmak istergeometrikyasemantikyakınlaştırma.

Geometrik yakınlaştırma uygulamak demek bir tek dönüştürme tüm görüntü alanına ne zaman seni daireler daha büyük hale yaklaştırın. Eğer yakınlaştırmak, daireler aynı boyutta kalır ama yaydı. anlamsal aksine yakınlaştırma her daire için ayrı ayrı dönüşümler uygulamak anlamına gelir: Planethunters.org şu anda semantik yakınlaştırma kullanır, ama diğer durumlarda dikkate almak faydalı olabilir.

Geometrik yakınlaştırma kolaylaştırır uygulaması: Çevir ve bir kez ölçek, ve sonra bütün daireler yeniden işlenmiş. bir Uygula SVG uygulaması özellikle basit, "dönüşüm" özniteliği. tek bir güncelleme. Hem geometrik yakınlaştırma örnekleri performansı yeterli fazla hissediyor. Semantik yakınlaştırma, D3 Protovis daha önemli ölçüde daha hızlı olduğunu fark edeceksiniz. Bu çok daha az iş, her olay zum yapıyor çünkü. (Protovis sürümü tüm unsurları tüm öznitelikleri yeniden hesaplamak için vardır.) Tuval tabanlı anlamsal yakınlaştırma SVG biraz daha zippy, ama SVG semantik yakınlaştırma hala yanıt geliyor.

Henüz performans için sihirli mermi yok, ve bu dört olası yaklaşımlar büyük bir imkan alanı kapsayacak şekilde başlamak istemiyorum.Örneğin, geometrik ve semantik yakınlaştırma, kaydırma için geometrik yaklaşım (güncelleme "" öznitelik dönüşümü ve yalnızca yakınlaştırma. karşın, tek tek halkaları yeniden kullanarak birleştirebilirsiniz Olabilir hatta belki araya bir veya daha fazla bu teknikler ile CSS3 dönüşümler eklemek bazı donanım hızlandırma (hierarchical edge bundling example), ancak bu yanıltıcı olabilir uygulamak ve Mayıs tanıtmak görsel eserler.

Yine de, benim kişisel tercihiSVG mümkün olduğu kadar tutun, ve Tuval kullanılması için "iç döngü" ne zaman işleme darboğaz. SVG CSS, veri katılır ve Müfettiş pek sık rastlanan bir Tuval ile başlamak için erken optimizasyonu olduğunu unsuru olarak geliştirilmesi için bir çok kolaylık vardır. SVG ile Tuval birleştiren Facebook halka ARZ görselleştirme bağlantılı olarak, hala en iyi performansı eking sırasında bu kolaylıklar çoğunu korumak için esnek bir yoldur. Ben de zaman serisi özel durum görüntüleme lends nerede Cubism.js, bu tekniği bitmap önbelleğe alma için kullanılır.

Bu örneklerde de görüldüğü gibi, D3 parçaları SVG özgü olsa da Tuval ile D3 kullanabilirsiniz. Ayrıca force-directed graph collision detection example bunu görüyorum.