בניית גרפים דינמיים במהירות על D3 עם Plottable.js

החופשי ספריית D3 הוא רק אחד מני רבים שמאפשר לך ליצור גרפיקה אינטראקטיבית על הדף. בעוד D3 הוא אולי הפופולרי ביותר של חבורה, ללמוד להשתמש בו היא לא משימה קלה.

בגלל זה Plottable.js היא ספריה כה יקרה. זה פרויקט קוד פתוח ללא תשלום שנבנה על גבי D3js, מה שמקל על כל אחד ליצור נתונים אינטראקטיביים גרפים מאפס.

ספריה זו מטפל בכל העבודה המלוכלכת, כך שתוכל להתמקד בפרטיות כגון נתונים. גמיש מייצר את הקוד הנכון עבור גודל ומיקום של כל תרשים שתבחר.

כל תרשים יש רכיב משלה ב Plottable שבו אתה יכול להעתיק / להדביק את קוד התבנית לבנות מחדש את התרשים בעצמך. נכון לכתיבה זו, ניתן לבחור מתוך 10 העלילה גרף סגנונות, כולל גרפים בר, תרשימי עוגה, מגרשים פיזור, מגרשים באזור.

אתה יכול לבנות מחדש רכיבים בנפרד ו להתאים אישית את ההגדרות שלהם באופן דינמי. בדרך זו, אתה יכול בקלות לשנות אלמנטים אינטראקטיביים, צבעים, אנימציות, מיקומים, גדלים, וכל מה שאתה צריך.

ה ספריה מלאה זמין ב- GitHub אם ברצונך לעיין בקוד המקור ולהוריד עותק.

אבל, הדרך הטובה ביותר ללמוד היא באמצעות דוגמה. זו הסיבה שאתה צריך להסתכל על שלהם גרפים מדגם פועל Plottable כדי לראות איך זה עובד בפעולה.

כל גרף הוא אינטראקטיביים, עם קוד המקור לאתחל. אם אתה רוצה לבנות מחדש גרף דומה רק להעתיק / להדביק את קוד JS לאתחל מחדש לפי הצורך.

יש לי שני מועדפים אישיים מהאתר שלהם: לוח שנה על פי לוח הפעילות של גיתוב תרשימים מסונכרנים עם תכונות בחירה דינמית.

אם מעולם לא השתמשת D3js לפני אז אתה תהיה המאבק ללמוד את הספרייה. במיוחד, כי זה שנכתב ב- ScriptScript, אז אתה בטח רוצה לקחת את זה גם כן. הקוד הסופי הוא מלוקט לתוך ES5 JavaScript, אז זה צריך עבודה בכל הדפדפנים העיקריים.

אם אתה מוכן לצלול להעיף מבט שלהם דף הדרכות מלא של משאבים שימושיים. תלמד את כל מה שאתה צריך כדי להתחיל עם Plottable ו ל ליצור גרפים דינמיים מבוססי אינטרנט מאפס.