มีไลบรารี่ Canvas ที่เหมือนกับ d3.js (เป็นไลบรารี svg) หรือไม่ ฉันมีเว็บไซต์ที่นี่ และฉันเขียนกราฟด้วยองค์ประกอบ svg แต่มันไม่มีประสิทธิภาพบนเบราว์เซอร์ของสมาร์ทโฟนและทำงานช้ามาก ตอนนี้ผมอยากจะเปลี่ยนเป็นแบบ 2d canvas แล้วดูว่าดีขึ้นหรือไม่ คุณช่วยแนะนำไลบรารี่ Canvas ที่มีประโยชน์สำหรับจุดประสงค์นี้ได้ไหม?
ขอบคุณ...
D3 ไม่จำเป็นต้องเป็นไลบรารี svg เท่านั้น - svg ถูกใช้ในหลายกรณี แต่ไลบรารีสามารถดำเนินการแทนรูปแบบใดก็ได้ที่คุณต้องการ ดูตัวอย่างพิกัดคู่ขนานโดยใช้ Canvas ใน D3 โดย Kai Chang: http://bl.ocks.org/2409451
โปรดดูการอภิปรายเกี่ยวกับปัญหาด้านประสิทธิภาพ ฯลฯ ที่นี่ ซึ่งอาจเป็นประโยชน์: https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion
ฉันรู้ว่าฉันไปงานปาร์ตี้สาย แต่เวลาเปลี่ยนไป และฉันเชื่อว่าคำถามนี้สมควรได้รับคำตอบที่อัปเดต ประสิทธิภาพของ SVG ได้รับการปรับปรุงอย่างมากในช่วงหลายปีที่ผ่านมา และโดยเฉพาะอย่างยิ่งสำหรับการแสดงภาพเหมือนกราฟที่ไม่ธรรมดา มักจะให้ประสิทธิภาพที่เหนือกว่า แต่จริงๆ แล้วขึ้นอยู่กับกรณีการใช้งานที่แน่นอน หากการแสดงภาพทำได้ง่ายและประกอบด้วยองค์ประกอบหลายพันรายการ โดยเฉพาะบนมือถือ Canvas อาจเป็นตัวเลือกที่เร็วกว่า หากการแสดงภาพข้อมูลแทบจะไม่เป็นเรื่องเล็กน้อย WebGL จะให้ประสิทธิภาพที่ดีที่สุดและเหนือกว่า Canvas โดยสิ้นเชิง โดยเฉพาะบนมือถือ!
อย่างไรก็ตาม โดยเฉพาะ WebGL และ Canvas นั้นใช้งานยากกว่าวิธีการประกาศที่ SVG ใช้เล็กน้อย สิ่งต่างๆ เช่น ภาพเคลื่อนไหวและการเปลี่ยนภาพ CSS นั้นทำได้ง่ายด้วย SVG และให้ประสิทธิภาพที่ดีเนื่องจากการเร่งด้วยฮาร์ดแวร์ และไม่ขึ้นอยู่กับประสิทธิภาพของ JavaScript โดยสิ้นเชิง Canvas และ WebGL ต้องใช้ JavaScript เสมอ
หากคุณดูไลบรารีการวาดกราฟเชิงพาณิชย์ yFiles for HTML คุณจะเห็นว่าไลบรารีนี้มีเทคโนโลยีทั้งสามอย่าง ในเวลาเดียวกัน. เนื่องจากทั้งสามสามารถเป็นตัวเลือกที่ดีที่สุดได้ ขึ้นอยู่กับกรณีการใช้งานที่แน่นอน
มีรายการบล็อกที่เปรียบเทียบประสิทธิภาพของ SVG, Canvas และ WebGL โดยเฉพาะ ในบริบทของการแสดงภาพกราฟ เปรียบเทียบขนาดกราฟและหมวดหมู่ของอุปกรณ์ต่างๆ “ข้อสรุป” คือไม่มีผู้ชนะที่ชัดเจน บ่อยครั้งการผสมผสานเทคโนโลยีทั้งสามอย่างเข้าด้วยกันจะให้ผลลัพธ์ที่ดีที่สุด สำหรับกราฟขนาดเล็ก SVG มักจะให้ผลลัพธ์ที่ดีมาก และยินดีที่ได้ร่วมงานด้วย นั่นเป็นเหตุผลว่าทำไม d3.js จึงมุ่งเน้นไปที่ SVG มากกว่า Canvas และ WebGL ฉันจะบอกว่า
มีการสาธิตแบบโต้ตอบที่เชื่อมโยงจากรายการบล็อกนั้น ซึ่งให้คุณเล่นกับเทคโนโลยีต่างๆ ได้ และเห็นจุดแข็งและจุดอ่อนของพวกเขา แน่นอนว่าการสาธิตจะเปรียบเทียบเทคโนโลยีทั้งสามที่ใช้ในไลบรารี่นั้นๆ เป็นหลัก ดังนั้นผลลัพธ์ของคุณอาจแตกต่างกันไป แต่พวกเขาใช้เวลาส่วนใหญ่ในการเพิ่มประสิทธิภาพเทคโนโลยีทั้งสามในไลบรารีนั้น ดังนั้นผมคิดว่าผลลัพธ์ที่ได้จะไม่ลำเอียงเกินไป
ข้อจำกัดความรับผิดชอบ: ฉันทำงานให้กับบริษัทที่สร้างห้องสมุดที่กล่าวถึงข้างต้น แต่ฉันไม่ได้เป็นตัวแทนของนายจ้างใน SO ฉันคิดว่าสิ่งที่ฉันพูดควรจะใช้ได้ไม่ใช่แค่กับห้องสมุดนั้นเท่านั้น
สำหรับแอป Facebook ของ Samsung Olympic Genome Project เราใช้ http://thejit.org เพื่อสร้างภาพเคลื่อนไหวสไตล์กราฟแบบบังคับทิศทางสำหรับแอป ฉันและคนอื่นๆ ในทีมได้รับการแก้ไขอย่างมาก และแน่นอนว่ามันมีส่วนเล็กๆ น้อยๆ ในแอป แต่มันก็เป็นเฟรมเวิร์กที่ทรงพลังทีเดียว
Chart.js เป็นไลบรารีจาวาสคริปต์ที่เพิ่งเปิดตัวซึ่งสร้างแผนภูมิโดยใช้ HTML5 สำหรับการเรนเดอร์ มันไม่ได้ครอบคลุมฟีเจอร์เหมือนกับ D3 แต่กำลังพยายามทำให้เป็นอย่างนั้นในอนาคต http://www.chartjs.org/
ลองดูที่ Cytoscape.JS ซึ่งใช้ผ้าใบ HTML5 ในการแสดงผล ในขณะที่เขียนบทความนี้ ยังอยู่ในช่วงเริ่มต้น แต่โครงการนี้ดูมีแนวโน้มดี ตามวิกิห้องสมุดรองรับทั้งเบราว์เซอร์เดสก์ท็อปและมือถือ:
Cytoscape.js สามารถรวมเข้ากับเว็บแอปของคุณได้อย่างง่ายดาย โดยเฉพาะอย่างยิ่งเมื่อ Cytoscape.js รองรับทั้งเบราว์เซอร์บนเดสก์ท็อป เช่น Chrome และเบราว์เซอร์มือถือ เช่น บน iPad
