با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در این جلسه از آموزش های دوره D3.js به نحوه رسم نمودار در D3.js می پردازیم. نمودار یک روش نمایش گرافیکی برای دادهها است. انواع مختلفی از نمودارها وجود دارند که هر کدام برای کاربردهای خاصی مناسب هستند. D3.js برای ایجاد نمودار SVG به صورت استاتیک استفاده می شود. همچنین به ما کمک می کند تا برخی از نمودار ها مانند نمودار خطی و نمودار دایره ای در D3.js و … را رسم کنیم.
ما می توانیم انواع مختلفی از رسم نمودار در D3.js را داشته باشیم :
در مورد رسم نمودار در D3.js توضیحاتی داده شده است. بگذارید هر یک از این نمودار ها را با جزئیات بیاموزیم.
نمودارهای میله ای یکی از رایج ترین انواع رسم نمودار در D3.js هستند و برای نمایش و مقایسه اعداد، فرکانس یا سایر مقادیر (به عنوان مثال میانگین) برای دسته ها یا گروه های گسسته استفاده می شود.
این نمودار به گونه ای ساخته شده است که ارتفاع یا طول میله های مختلف متناسب با اندازه دسته ای هستند که آنها مدیریت می کنند.
محور x (محور افقی) دسته های مختلفی را نشان می دهد که مقیاس ندارند.
محور y (محور عمودی) دارای یک مقیاس است و نشان دهنده واحدهای اندازه گیری است.
میله ها می توانند به صورت عمودی یا افقی بسته به تعداد دسته ها و طول یا پیچیدگی دسته بندی شوند.
اجازه دهید با استفاده از D3 یک نمودار میله ای را در SVG ایجاد کنیم.
برای مثال، می توانیم از عناصر rect برای میله ها و عناصر متن برای نشان دادن مقادیر داده های مربوط به میله ها استفاده کنیم.
با استفاده از D3 برای ایجاد یک نمودار میله ای در SVG ، باید مراحل زیررا دنبال کنید.
مرحله ۱ : افزودن سبک در عنصر مستطیل ، اجازه دهید سبک زیر را به عنصر مستطیل اضافه کنیم.
1 2 3 | svg rect { fill: gray; } |
مرحله ۲ : اضافه کردن سبک در عنصر متن، اضافه کردن کلاس CSS زیر برای اعمال سبک به مقادیر متن. این سبک را به عنصر متن SVG اضافه کنید.
1 2 3 4 5 | svg text { fill: yellow; font: 12px sans-serif; text-anchor: end; } |
اینجا، برای اعمال رنگ پر می شود. Text-anchor برای قرار دادن متن در انتهای سمت راست نوارها استفاده می شود.
مرحله ۳ : تعریف متغیرها ، اجازه دهید متغیرها را در اسکریپت اضافه کنیم. همانطور که در زیر توضیح داده شده است.
1 2 3 4 5 6 | <script> var data = [10, 5, 12, 15]; var width = 300, scaleFactor = 20, barHeight = 30; </script> |
در این مثال :
Width : عرض SVG است.
Scalefactor : مقیاس بندی یک مقدار به پیکسل است که روی صفحه نمایش قابل مشاهده است.
Barheight : ارتفاع استاتیک از میله های افقی است.
مرحله ۴ – اضافه کردن عناصر SVG ، اجازه دهیدبا استفاده از کد زیر عناصر SVG را در D3 اضافه کنیم.
1 2 3 4 | var graph = d3.select("body") .append("svg") .attr("width", width) .attr("height", barHeight * data.length); |
در اینجا، ابتدا بدنه سند را انتخاب کرده، و سپس یک عنصر جدید SVG را ایجاد و آن را اضافه می کنیم.
پس از اینکه گراف نواری مان را در عنصر SVG ساختیم. عرض و ارتفاع SVG را تنظیم کنید. ارتفاع برابر است با : ارتفاع نوار * تعداد مقادیر داده .
ما ارتفاع نوار را ۳۰ گرفته ایم و طول آرایه داده ۴ است. پس ارتفاع SVG به این صورت محاسبه می شود : ارتفاع ۳۰*۴ که برابر۱۲۰ پیکسل است.
مرحله ۵ : اعمال تغییرات. اجازه دهید تغییرات در نوار را با استفاده از کد زیر اعمال کنیم.
1 2 3 4 5 6 7 | var bar = graph.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); |
هر نوار در داخل مربوط به یک عنصر است. بنابراین، ما عناصر گروه را ایجاد می کنیم.
هر یک از عناصر گروه باید در یک زیر صفحه دیگر قرار بگیرد تا یک نمودار نوار افقی ایجاد شود.
فرمول انتقال به صورت کلی می شود : (فهرست)index * (ارتفاع نوار)bar height
در مرحله قبل، عناصر گروه را اضافه کردیم. حالا عناصر rect را به نوار با استفاده از کد زیر اضافه کنید.
1 2 3 4 5 | bar.append("rect") .attr("width", function(d) { return d * scaleFactor; }) .attr("height", barHeight - 1); |
عرض برابر با : (مقدار داده * مقیاس عامل) و ارتفاع (ارتفاع نوار – حاشیه) است.
مرحله ۷ : نمایش اطلاعات – این آخرین مرحله است. بگذارید داده ها را در هر نوار با استفاده از کد زیر نمایش دهیم.
1 2 3 4 5 | bar.append("text") .attr("x", function(d) { return (d*scaleFactor); }) .attr("y", barHeight / 2) .attr("dy", ".35em") .text(function(d) { return d; }); |
عرض به عنوان (مقدار داده * scalefactor) تعریف می شود. عناصر متن، پوسته یا حاشیه را پشتیبانی نمی کنند.
به همین دلیل ما نیاز به offset با نام “Dy” داریم. این مورد برای تنظیم کردن متن به صورت عمودی استفاده می شود.
مرحله ۸ : نحوه کار کردن مثال، لیست کد کامل در بلوک کد زیر نمایش داده می شود. یک صفحه وب barcharts.html ایجاد کنید و تغییرات زیر را اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> svg rect { fill: gray; } svg text { fill: yellow; font: 12px sans-serif; text-anchor: end; } </style> </head> <body> <script> var data = [10, 5, 12, 15]; var width = 300 scaleFactor = 20, barHeight = 30; var graph = d3.select("body") .append("svg") .attr("width", width) .attr("height", barHeight * data.length); var bar = graph.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); bar.append("rect").attr("width", function(d) { return d * scaleFactor; }) .attr("height", barHeight - 1); bar.append("text") .attr("x", function(d) { return (d*scaleFactor); }) .attr("y", barHeight / 2) .attr("dy", ".35em") .text(function(d) { return d; }); </script> </body> </html> |
یک درخواست به مرورگر خود بدهید، پاسخ زیر را خواهید دید.
نمودار دایره ای یک گرافیک آماری دایره ای است که به شکلی تقسیم می شود تا نسبت عددی را نشان دهد.
اجازه دهید یک نمودار دایره ای را در SVG با استفاده از D3 ایجاد کنیم. برای انجام این کار، ما باید به مراحل زیر پیروی کنیم :
مرحله ۱ : تعریف متغیرها ، اجازه دهید متغیرها را در اسکریپت اضافه کنیم. این کار در بلوک کد زیر نشان داده شده است.
1 2 3 4 5 6 | <script> var width = 400; var height = 400; var data = [10, 20, 30]; var colors = ['green', 'purple', 'yellow']; </script> |
Width : عرض SVG است.
Height : ارتفاع SVG است.
Data : آرایه ای از عناصر داده می باشد.
Colors : رنگ ها را به عناصر دایره اعمال می کند.
مرحله ۲ : اضافه کردن عناصر SVG ،اجازه دهید عناصر SVG را در D3 با استفاده از کد زیر اضافه کنیم.
1 2 3 4 | var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); |
مرحله ۳ : اعمال تغییرات ، اجازه دهید تغییرات را در SVG با استفاده از کد زیر اعمال کنیم.
1 2 3 4 5 6 7 | var g = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0,0)"; }) |
(“var g = svg.selectAll (“g : عنصر گروه برای نگه داشتن حلقه ها ایجاد می کند.
(data (data : آرایه داده های ما را به عناصر گروه متصل می کند.
()enter : متغیرهایی را برای عناصر گروه ایجاد می کند.
(:”append (“g: عناصر گروه را به صفحه اضافه می کند.
1 2 3 | .attr("transform", function(d, i) { return "translate(0,0)"; }) |
در این قسمت، translate برای موقعیت عناصر با توجه به مبدأ استفاده می شود.
مرحله ۴ : عناصر دایره را اضافه کنید . اکنون با استفاده از کد زیر عناصر دایره را به گروه اضافه کنید.
1 | g.append("circle") |
سپس، با استفاده از کد زیر، صفات را به گروه اضافه کنید.
1 2 3 | .attr("cx", function(d, i) { return i*75 + 50; }) |
در اینجا ما از مختصات x از مرکز هر حلقه استفاده می کنیم. شاخص دایره را با ۷۵ ضرب می کنیم و به دایره ها پدینگ ۵۰ را اضافه می کنیم.
سپس، مختصات y را از مرکز هر حلقه تنظیم می کنیم.
اینکار برای پوشاندن تمام حلقه ها استفاده می شود و کد آن در زیر تعریف شده است.
1 2 3 | .attr("cy", function(d, i) { return 75; }) |
اکنون، شعاع هر دایره را تنظیم کنید.
1 2 3 | .attr("r", function(d) { return d*1.5; }) |
شعاع با مقدار داده ضرب می شود و ثابت “۱٫۵” برای افزایش اندازه دایره است. در آخر، با استفاده از کد زیر رنگها را برای هر حلقه اختصاص می دهیم.
1 2 3 | .attr("fill", function(d, i){ return colors[i]; }) |
مرحله ۵ : نمایش اطلاعات، این آخرین مرحله است. با استفاده از کد زیر، داده ها در هر حلقه نمایش داده می شوند.
1 2 3 4 5 6 7 8 9 10 11 | g.append("text") .attr("x", function(d, i) { return i * 75 + 25; }) .attr("y", 80) .attr("stroke", "teal") .attr("font-size", "10px") .attr("font-family", "sans-serif") .text(function(d) { return d; }); |
یک صفحه وب circlecharts.html ایجاد کنید و تغییرات زیر را در آن اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> var width = 400; var height = 400; var data = [10, 20, 30]; var colors = ['green', 'purple', 'yellow']; var svg = d3 .select("body") .append("svg") .attr("width", width) .attr("height", height); var g = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0,0)"; }) g.append("circle").attr("cx", function(d, i) { return i*75 + 50; }) .attr("cy", function(d, i) { return 75; }) .attr("r", function(d) { return d*1.5; }) .attr("fill", function(d, i){ return colors[i]; }) g.append("text").attr("x", function(d, i) { return i * 75 + 25; }) .attr("y", 80) .attr("stroke", "teal") .attr("font-size", "10px") .attr("font-family", "sans-serif").text(function(d) { return d; }); </script> </body> </html> |
با فرستادن درخواست به مرورگر خود نمودار زیرا مشاهده خواهید کرد.
نمودار دایره ای یک نمودار ویژه است که از قطاعهای دایرهای برای نشان دادن اندازه نسبی دادهها استفاده میکند.
ساده ترین تمثیل برای نمودار دایرهای، تشبیه آن به یک پیتزا است.
بدین ترتیب میتوانید قاچهای پیتزا را قطاعهای نمودار در نظر بگیرید. برای توضیح بیشتر مثالی را در ادامه ارائه کردهایم.
قبل از شروع به رسم نمودار دایره ای در D3.js ، ما باید دو متد زیر را یاد بگیریم : متد ()d3.arc و متد ()d3.pie .
اجازه دهید هر دو روش را با جزئیات توضیح دهیم.
متد ()d3.arc
متد ()d3.arc قوس(arc) را تولید می کند. شما به تنظیم شعاع داخلی و شعاع بیرونی برای قوس نیاز دارید.
اگر شعاع داخلی ۰ باشد، نتیجه یک نمودار دایره ای در D3.js خواهد بود، در غیر این صورت نتیجه یک نمودار دوناتی است که در بخش بعدی بحث شده است.
متد ()d3.pie
این متد برای تولید یک نمودار دایره ای در D3.js استفاده می شود.
یک داده از مجموعه داده ها را می گیرد و زاویه شروع و زاویه پایان برای هر گره نمودار دایره را محاسبه می کند.
با استفاده از مراحل زیر یک نمودار دایره ای بسازید.
مرحله ۱ : اعمال سبک – اجازه دهید سبک زیر را به عنصر arc(قوس) اعمال کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .arc text { font: 12px arial; text-anchor: middle; } .arc path { stroke: #fff; } .title { fill: green; font-weight: italic; } |
fill برای اعمال رنگ هاست. text-anchor موقعیت متن را از مرکز arc تعیین می کند.
مرحله ۲ : تعریف متغیرها، تعریف متغیرها در اسکریپت زیر نشان داده شده است.
1 2 3 4 5 6 | <script> var svg = d3.select("svg"), width = svg.attr("width"), height = svg.attr("height"), radius = Math.min(width, height) / 2; </script> |
Width : عرض SVG است.
Height : ارتفاع SVG است.
Radius : با استفاده از تابع Math.min محاسبه می شود. ۲/(عرض، ارتفاع) ؛
1 2 | var g = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); |
حالا رنگ ها را با استفاده از تابع d3.scaleOrdinal به صورت زیر وارد کنید.
1 | var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']); |
1 2 | var pie = d3.pie() .value(function(d) { return d.percent; }); |
شما می توانید مقادیر درصد را تعیین کنید. یک تابع برای بازگشت d.percent لازم است و آن را به عنوان مقدارpie تعیین می کند.
1 2 3 | var arc = d3.arc() .outerRadius(radius) .innerRadius(0); |
arc به عناصر مسیر تنظیم می شود. شعاع محاسبه شده با outerradius تنظیم شده است، در حالی که innerradius به ۰ تنظیم شده است.
1 2 3 4 | var label = d3 .arc() .outerRadius(radius) .innerRadius(radius - 80); |
1 2 3 4 5 | d3.csv("populations.csv", function(error, data) { if (error) { throw error; } }); |
populations.csv شامل فایل داده است. تابع d3.csv اطلاعات از مجموعه داده را می خواند.
اگر داده ها وجود نداشته باشد، یک خطا برگردانده می شود. ما می توانیم این فایل را در مسیر D3 خود قرار دهیم.
1 2 3 4 5 | var arc = g.selectAll(".arc") .data(pie(data)) .enter() .append("g") .attr("class", "arc"); |
در اینجا می توانیم داده ها را به عناصر گروه برای هر یک از مقادیر داده از مجموعه داده اختصاص دهیم.
1 2 3 | arcs.append("path") .attr("d", arc) .attr("fill", function(d) { return color(d.data.states); }); |
fill برای اعمال رنگ داده هاست. از تابع d3.scaleOrdinal گرفته شده است.
مرحله ۱۰ : اضافه کردن متن ، برای نمایش متن در برچسب می توان از کد زیر استفاده کرد.
1 2 3 4 5 | arc.append("text") .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) .text(function(d) { return d.data.states; }); |
الگویی که قبلا ایجاد کردیم با استفاده از ()d3.arc یک نقطه مرکزی را نشان می دهد، که موقعیتی برای برچسب است.
در نهایت، داده ها را با استفاده از d.data.browser ارائه می کنیم.
مرحله ۱۱ : افزودن عناصر گروهی ، صفات عناصر گروه را اضافه کنید و عنوان class را برای رنگ متن بفرستید .
آن را به صورت ایتالیک(مورب) قرار دهید، همانطورکه در مرحله ۱ مشخص شده است و در زیر تعریف شده است.
1 2 3 4 5 | svg.append("g") .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")") .append("text") .text("Top population states in india") .attr("class", "title") |
مرحله ۱۲ : عملکرد مثال، برای رسم نمودار، می توانیم مجموعه ای از جمعیت هند را جمع کنیم.
این مجموعه داده ها جمعیت در یک وب سایت ساختگی را نشان می دهد ، که به شرح زیر تعریف شده است.
1 2 3 4 5 6 7 8 | states,percent UP,80.00 Maharastra,70.00 Bihar,65.0 MP,60.00 Gujarat,50.0 WB,49.0 TN,35.0 |
اکنون اجازه دهید نمودار دایره ای را برای مجموعه داده ها ایجاد کنیم.یک صفحه وب “piechart.html” ایجاد کنید و کد زیر را در آن اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE html> <html> <head> <style> .arc text { font: 12px arial; text-anchor: middle; } .arc path { stroke: #fff; } .title { fill: green; font-weight: italic; } </style> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg width = "400" height = "400"></svg> <script> var svg = d3.select("svg"), width = svg.attr("width"), height = svg.attr("height"), radius = Math.min(width, height) / 2; var g = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var color = d3.scaleOrdinal([ 'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple' ]); var pie = d3.pie().value(function(d) { return d.percent; }); var path = d3.arc() .outerRadius(radius - 10).innerRadius(0); var label = d3.arc() .outerRadius(radius).innerRadius(radius - 80); d3.csv("populations.csv", function(error, data) { if (error) { throw error; } var arc = g.selectAll(".arc") .data(pie(data)) .enter() .append("g") .attr("class", "arc"); arc.append("path") .attr("d", path) .attr("fill", function(d) { return color(d.data.states); }); console.log(arc) arc.append("text").attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) .text(function(d) { return d.data.states; }); }); svg.append("g") .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")") .append("text").text("Top population states in india") .attr("class", "title") </script> </body> </html> |
نمودار دونات فقط یک نمودار پایه ساده با یک حفره در داخل است.
ما می توانیم شعاع حفره را به اندازه ای که نیاز دارید تعریف کنیم، با واحدهای درصد یا پیکسل.
همچنین ما می توانیم یک نمودار دونات را به جای نمودار دایره ای ایجاد کنیم.
شعاع داخلی قوس( arc) را تغییر دهید تا مقدار بیشتری از صفر استفاده شود.
1 2 3 | var arc = d3.arc() .outerRadius(radius) .innerRadius(100); |
همانند نمودار دایره ای و با شعاع داخلی کمی تغییر یافته، می توانیم یک نمودار دونات ایجاد کنیم.
یک صفحه وب dounutchart.html ایجاد کنید و تغییرات زیر را در آن اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE html> <html> <head> <style> .arc text { font: 12px arial; text-anchor: middle; } .arc path { stroke: #fff; } .title { fill: green; font-weight: italic; } </style> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg width = "400" height = "400"></svg> <script> var svg = d3.select("svg"), width = svg.attr("width"), height = svg.attr("height"), radius = Math.min(width, height) / 2; var g = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var color = d3.scaleOrdinal([ 'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple' ]); var pie = d3.pie().value(function(d) { return d.percent; }); var path = d3.arc() .outerRadius(radius) .innerRadius(100); var label = d3.arc() .outerRadius(radius) .innerRadius(radius - 80); d3.csv("populations.csv", function(error, data) { if (error) { throw error; } var arc = g.selectAll(".arc") .data(pie(data)) .enter() .append("g") .attr("class", "arc"); arc.append("path") .attr("d", path) .attr("fill", function(d) { return color(d.data.states); }); console.log(arc) arc.append("text") .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) .text(function(d) { return d.data.states; }); }); svg.append("g") .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")") .append("text") .attr("class", "title") </script> </body> </html> |
در اینجا متغیر path را به صورت زیر تغییر دادیم:
1 2 3 | var path = d3.arc() .outerRadius(radius) .innerRadius(100); |
مقدار internalRadius> 0 را برای ایجاد یک نمودار دونات تنظیم می کنیم.
در نهایت، با فرستادن درخواست در مرورگرما می توانیم پاسخ زیر را مشاهده کنیم.
رسم نمودار در D3.js راه حل خوبی برای نمایش اندازههای مرتبط با هم است. به طور فرضی توسط نمودار با یک نگاه میتوان فهمید کدام سبک فیلم بیشتر از همه و کدام کمتر از همه مورد پسند بوده است. شما نیز میتوانید برای دادههای خودتان نمودارهای مختلفی را رسم کنید. آموزش رسم نمودار در D3.js به پایان رسید با ما همراه باشید تا در جلسه بعد با گراف ها در این فریم ورک آشنا شوید.