5
แผนภูมิ / กราฟเชิงโต้ตอบที่รวดเร็วและตอบสนอง: SVG, Canvas, อื่น ๆ ?
ฉันกำลังพยายามเลือกเทคโนโลยีที่เหมาะสมเพื่อใช้ในการอัปเดตโปรเจ็กต์ที่โดยทั่วไปแล้วจะแสดงจุดหลายพันจุดในกราฟที่สามารถซูมได้และสามารถเลื่อนได้ การใช้งานปัจจุบันโดยใช้ Protovis มีประสิทธิภาพต่ำ ตรวจสอบได้ที่นี่: http://www.planethunters.org/classify มีจุดประมาณ 2,000 จุดเมื่อซูมออกจนสุด ลองใช้ที่จับที่ด้านล่างเพื่อซูมเข้าเล็กน้อยแล้วลากเพื่อเลื่อนไปรอบ ๆ คุณจะเห็นว่ามันค่อนข้างขาด ๆ หาย ๆ และการใช้งาน CPU ของคุณอาจสูงถึง 100% ในหนึ่งคอร์เว้นแต่คุณจะมีคอมพิวเตอร์ที่เร็วมาก การเปลี่ยนพื้นที่โฟกัสแต่ละครั้งจะเรียกการวาดใหม่เป็นโปรโตวิสซึ่งค่อนข้างช้าและแย่กว่าเมื่อมีการดึงจุดมากขึ้น ฉันต้องการอัปเดตอินเทอร์เฟซบางอย่างรวมทั้งเปลี่ยนเทคโนโลยีการแสดงภาพที่เป็นพื้นฐานให้ตอบสนองกับภาพเคลื่อนไหวและการโต้ตอบมากขึ้น จากบทความต่อไปนี้ดูเหมือนว่าตัวเลือกจะอยู่ระหว่างไลบรารีที่ใช้ SVG อื่นหรือแบบผ้าใบ http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ d3.jsซึ่งงอกออกมาจาก Protovis เป็น SVG-based และควรจะเป็นดีกว่าที่การแสดงผลภาพเคลื่อนไหว อย่างไรก็ตามฉันสงสัยว่าจะดีขึ้นมากแค่ไหนและเพดานประสิทธิภาพของมันเป็นอย่างไร สำหรับเหตุผลที่ฉันยังพิจารณายกเครื่องสมบูรณ์มากขึ้นโดยใช้ห้องสมุดผ้าใบ-based เช่นKineticJS อย่างไรก็ตามก่อนที่ฉันจะใช้วิธีใดวิธีหนึ่งมากเกินไปฉันอยากได้ยินจากคนที่ทำเว็บแอปพลิเคชันที่คล้ายกันซึ่งมีข้อมูลจำนวนมากนี้และขอความเห็นจากพวกเขา สิ่งที่สำคัญที่สุดคือประสิทธิภาพโดยเน้นที่ความสะดวกในการเพิ่มคุณสมบัติการโต้ตอบอื่น ๆ และการเขียนโปรแกรมภาพเคลื่อนไหว อาจจะมีไม่เกิน 2,000 จุดในครั้งเดียวโดยมีแถบข้อผิดพลาดเล็ก ๆ ในแต่ละอัน การซูมเข้าออกและการเลื่อนไปมาจะต้องมีความราบรื่น หากไลบรารี SVG ล่าสุดเหมาะสมกับสิ่งนี้บางทีความสะดวกในการใช้ d3 จะมีมากกว่าการตั้งค่าที่เพิ่มขึ้นสำหรับ KineticJS …