מדוע D3.js for Data Visualization

הדמיה נתונים מגבה את הפער בין מספרים גולמיים והבנה אנושית.בין הכלים הרבים הזמינים, D3.js (מסמכים נתונים-Driven) בולט כספרייה JavaScript רב-תכליתית, ברמה נמוכה שנותנת למפתחים שליטה ישירה על מודל האובייקט (DOM) בניגוד לספריות ריצוף ברמה גבוהה המציעות התאמה מוגבלת, D3 מאפשר לך למקם בדיוק את הייצוג החזותי שאתה צריך - מ ⁇ פשוטים ועד מפות מורכבות וגרסאות סטנדרטיות של נתונים.

מושגי Core של D3.js

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

אפשרויות ו-Data Binding

D3 משתמש ב-CSS בוחרים כדי לכוון אלמנטים, ולאחר מכן מצורף נתונים אליהם.השיטה:0 מצטרפת למערך ערכים עם נקודות נבחרות, והשיטה 1 של FLT יוצרת אלמנטים חדשים עבור כל נקודות נתונים שאין להן ערפל מתאים.תבנית זו של כניסה-עד-כעת מאפשרת לך להתמודד עם נתונים דינמיים ביעילות.

לדוגמה, כדי ליצור מעגלים עבור נתונים:

const data = [10, 25, 40, 30];
const svg = d3.select("body").append("svg")
 .attr("width", 400)
 .attr("height", 200);

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d)
 .attr("fill", "steelblue");

קשקשים ו Axes

(ה) עיין ב[[המאה ה-20]], [[1924]], [[1924]]]], [[1924]]]], [[1924]]]], [[1924]]]]]]]], [[1924]]]]]]]], [[1924]]]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]]]]]], [[1924]]]], [[1924]]]]]]]]]]]]]]]]]]]]]]]]]]]]]] ו[[1924]], [[1924]]]] [[1924]], [[1924]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]] [[1924]] [[1966]]]]]]]], [[1966]]]]]]]]]], [[1966]], [[1924]], [[1966]]]]]]]] [[1966]]]]]]]], [[1966]]]]]] [[1966]], [[1966]] [[1966]]]] [[[[1966]]]]]]]]]] [[1966]] [[1966]] [[[[1966]] [[1924

דוגמה לדרגה ליניארית:

const xScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([0, width]);

const yScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
svg.append("g")
 .attr("transform", `translate(0, ${height})`)
 .call(xAxis);

בניית ויזואליזציה אינטראקטיבית עם D3.js

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

כלים ו Highlighting

כליטיס מספקים ערכי נתונים מדויקים על גבי מערכת האירוע של D3, ניתן ליצור הצצה (FLT:9) המציג פרטים.לדוגמה, הרחבת תרשים בר עם כליטיס כבר הוכח בקוד המקורי; כאן אנו גם מוסיפים FLT:0color changeFLT:1 על מרחף:

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", d => height - d * 3)
 .attr("width", 50)
 .attr("height", d => d * 3)
 .attr("fill", "steelblue")
 .on("mouseover", function(event, d) {
 d3.select(this).attr("fill", "orange");
 tooltip.style("display", "block").text(`Value: ${d}`);
 })
 .on("mousemove", (event) => {
 tooltip.style("left", (event.pageX + 10) + "px")
 .style("top", (event.pageY - 20) + "px");
 })
 .on("mouseout", function() {
 d3.select(this).attr("fill", "steelblue");
 tooltip.style("display", "none");
 });

זום ופאן

עבור נתונים גדולים או נתוני עת, ג'ולינג ו panning לעזור למשתמשים להתמקד באזורים של עניין. התנהגות של D3 של D3 מינתה את מערכת הקואורדינט.

const zoom = d3.zoom()
 .scaleExtent([1, 10])
 .on("zoom", (event) => {
 g.attr("transform", event.transform);
 });

svg.call(zoom);

עדכון נתונים דינמי

לוחות נתונים אינטראקטיביים לעתים קרובות צריך לרענן נתונים מבלי לנסח מחדש את הדף.ד דפוס העדכון של D3 מטפל בחסד בהוספת, הסרת ושינויים באלמנטים.המפתח הוא להפעיל מחדש את ההצטרפות עם הנתונים החדשים ולהשתמש בהם (FLT:13 עבור נודים נוספים.

function updateData(newData) {
 const circles = svg.selectAll("circle").data(newData);
 circles.exit().remove(); // remove old
 circles.enter().append("circle") // add new
 .merge(circles) // merge with existing
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d);
}

שיטות D3 מתקדמות

המונחים: Geographic Visualization

D3 כולל מודולים מיוחדים ל ⁇ מורכבים: FLT:15 יוצר נתונים פאי / רדיקלי, סימולציה פיזיקה עבור גרפים רשת, FLT:17 פרויקטים ממפה נתונים באמצעות GeoJSON. אלה מודולים להפחית באופן דרסטי את הקוד הדרוש עבור הדמיה מתוחכמת.

const simulation = d3.forceSimulation(nodes)
 .force("link", d3.forceLink(links))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

טרנזיס ואנימציה

מעברי Smooth משפרים את חוויית המשתמש.D3'sFLT:19 , תכונת animates משתנה לאורך זמן.You יכול לשלוט משך הזמן, הקלה ועיכוב.לדוגמה, הגדלת ברים:

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", height)
 .attr("width", 50)
 .attr("height", 0)
 .attr("fill", "steelblue")
 .transition()
 .duration(800)
 .ease(d3.easeBounce)
 .attr("y", d => height - d * 3)
 .attr("height", d => d * 3);

Best Practices for Production-Ready D3

אופטימיזציה

(ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

נגישות ותגובה

ויזואליזציה צריכה להיות ניתנת להשגה על ידי כל המשתמשים לספק תגים של רכיבי SVG, להשתמש בתכונות RIT, וכולל שולחן מבוסס טקסט כנפילה.עבור עיצוב תגובתי, בסיס SVG על רוחב של מיכל באמצעות FLT:23 והאזנה לחלון אירועים בגודל של D3.

function resize() {
 const width = container.node().getBoundingClientRect().width;
 svg.attr("width", width)
 .attr("height", width * aspectRatio);
 // redraw scales and axes
}
window.addEventListener("resize", resize);

קודקוד

אפילו ביישום חד-עמודי, מבנה קוד ה-D3 שלך למודולים: אחד עבור נתונים שמביא, אחד עבור קשקשים / אקסס, אחד עבור ציור, ואחד עבור אינטראקציות. השתמש במודולים ES6 או חבילה כמו Webpack. להימנע ערבוב D3 לוגיקה עם מסגרת מחזור חיים קובצי ישירות; במקום זאת, ליצור מחלקה D3 כי המסגרת שלך מתקשרת.

ההרחבה D3 עם מסגרות מודרניות

תגובה, Angular ו-Vue לנהל את DOM שלהם כדי להימנע מסכסוכים, להשתמש ב-D3 רק לצורך חישובים (הדברים, הצורות) וניתן למסגרת להפוך את ה- SVG. לחלופין, להשתמש בחתימה ייעודית כמו FLT:25 או [21] ל-FLT:26 עם זאת, עבור שליטה מלאה, אתה עדיין יכול להשתמש ב-D3 בתוך מסגרת יעילה (R).

דוגמאות אמיתיות לשימוש ומקרים

D3 מבסס פרויקטים רבים של הדמיה גבוהה פרופיל: גלריה:0D3 על ObservableFLT:1 מציג מאות דוגמאות, מ choropleths אנימציה ועד קווי זמן אינטראקטיביים. ארגוני חדשות כמו ניו יורק טיימס להשתמש D3 לסיפורי נתונים מותאמים אישית. בהגדרות ארגוניות ארגוניות, D3 מאפשר לוחות נתונים פיננסיים או בזמן אמתי חיישן.

דוגמה: Scatter Plot Interactive עם Tooltips ו- Brushing

דמיינו לעצמכם התחלה של 500 נקודות עם x, y וקטגוריה.שימוש ב-D3, תוכלו ליצור פיזור העלילה עם מעגלים צבועים על ידי קטגוריה, כלי המציג את הקואורדינטות המדויקות, ומברשת המדגישה נקודות נבחרות.מבנה הקוד עוקב אחר הדפוסים לעיל.

const brush = d3.brush()
 .extent([[0, 0], [width, height]])
 .on("brush end", brushed);

svg.append("g").call(brush);

function brushed(event) {
 if (event.selection) {
 const [[x0, y0], [x1, y1]] = event.selection;
 circles.classed("selected", d =>
 x0 <= xScale(d.x) && xScale(d.x) <= x1 &&
 y0 <= yScale(d.y) && yScale(d.y) <= y1
 );
 } else {
 circles.classed("selected", false);
 }
}

למידה משאבים וצעדים הבאים

(ה) "לאדון D3" (ה) החל עם ה-FLT הרשמי:0D3.js DocumentFelo: 1 ו-"המדריכים החופשיים" (ה-D3) ו"ה-"מ-"מעבוד" (בתרגום חופשי: ⁇ )"בשיתוף פעולה באמצעות המחברות הניתנת לתפוצה רחבה ל-[[1924]], ו[[1924]], ו[[1924]], [[1924]],]], [[1924]],]], [[1924]],]], [[1924]], [[1924]], [[1924]], [[1924]], [[1924]], [[1924]]]]]]]], [[1924]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]

מסקנה

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