با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، این جلسه از آموزش های دوره D3.js به مقیاس API در D3.js اختصاص داده می شود. D3 توابعی را برای رسم محور فراهم می کند. محور از خطوط، علامت و برچسب ها ساخته شده است. یک محور از مقیاس استفاده می کند، بنابراین به هر محور باید یک مقیاس برای کار با آن داده شود. در این جلسه به پیکربندی API در D3.js می پردازیم.
ابتدا به پیکربندی API در D3.js می پردازیم. ما می توانیم API را مستقیما با استفاده از اسکریپت زیر پیکربندی کنیم.
1 2 3 4 5 6 7 8 9 10 11 | <script src = "https://d3js.org/d3-array.v1.min.js"></script> <script src = "https://d3js.org/d3-collection.v1.min.js"></script> <script src = "https://d3js.org/d3-color.v1.min.js"></script> <script src = "https://d3js.org/d3-format.v1.min.js"></script> <script src = "https://d3js.org/d3-interpolate.v1.min.js"></script> <script src = "https://d3js.org/d3-time.v1.min.js"></script> <script src = "https://d3js.org/d3-time-format.v2.min.js"></script> <script src = "https://d3js.org/d3-scale.v1.min.js"></script> <script> </script> |
D3 متد های مقیاس گذاری زیر را برای انواع مختلف نمودارها ارائه می دهد. ارز جمله آن ها عبارتند از :
()d3.scaleLinear : یک مقیاس خطی پیوندی را ایجاد می کند که در آن می توانیم داده های ورودی (دامنه) را به محدوده خروجی مشخص مشخص کنیم.
()d3.scaleIdentity :ساخت یک مقیاس خطی که داده های ورودی همان خروجی است.
()d3.scaleTime : ساخت یک مقیاس خطی که داده های ورودی آن در تاریخ و خروجی در اعداد است.
()d3.scaleLog : ساخت مقیاس لگاریتمی.
()d3.scaleSqrt : ساخت مقیاس ریشه ای مربع.
()d3.scalePow : ساخت مقیاس نمایشی.
()d3.scaleSequential : ساخت یک مقیاس متوالی که در آن محدوده خروجی با استفاده از تابع interpolator ثابت می شود.
()d3.scaleQuantize : ساخت یک مقیاس quantize با محدوده خروجی گسسته.
()d3.scaleQuantile : یک مقیاس quantile که در آن داده های نمونه ورودی به محدوده خروجی گسسته می رسند، می سازد.
()d3.scaleThreshold : ساخت مقیاس که در آن داده های ورودی دلخواه به محدوده خروجی گسسته است.
()d3.scaleBand : مقیاسهای باند مانند مقیاسهای مقطع هستند البته به جز محدوده خروجی پیوسته و عددی .
()d3.scalePoint : ساخت مقیاس نقطه ای.
()d3.scaleOrdinal : یک مقیاس مرتبه ای که در آن داده های ورودی شامل الفباها هستند را ایجاد کنید و به محدوده خروجی عددی مجزا ارجاع دهید.
قبل از انجام عملکرد مثال ، ابتدا به دو اصطلاح زیر توجه کنید:
دامنه : دامنه حداقل و حداکثر داده های ورودی شما را نشان می دهد.
محدوده : محدوده خروجی است، که ما می خواهیم مقادیر ورودی به نقشه به …
اجازه دهید عملکرد d3.scaleLinear را در این مثال انجام دهیم. برای انجام این کار، شما باید از مراحل زیر پیروی کنید :
مرحله ۱ : تعریف متغیرها ، متغیرها و داده های SVG را با استفاده از کدگذاری زیر تعریف کنید.
1 2 3 4 | var data = [100, 200, 300, 400, 800, 0] var width = 500, barHeight = 20, margin = 1; |
مرحله ۲ : ایجاد مقیاس خطی، برای ایجاد مقیاس خطی از کد زیر استفاده کنید.
1 2 3 | var scale = d3.scaleLinear() .domain([d3.min(data), d3.max(data)]) .range([100, 400]); |
در اینجا، برای حداقل و حداکثر مقدار دامنه به صورت دستی، می توانیم از توابع ساخته شده در ()d3.min و ()d3.max استفاده کنیم، که حداقل و حداکثر مقدار را به ترتیب از آرایه داده های ما باز می گرداند.
مرحله ۳ : اضافه کردن ویژگی SVG ، عناصر SVG را با استفاده از کد داده شده زیر اضافه کنید.
1 2 3 4 | var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", barHeight * data.length); |
مرحله ۴ : اعمال تغییرات ، اعمال تغییرات با استفاده از کد زیر صورت می گیرد.
1 2 3 4 5 | var g = svg.selectAll("g") .data(data).enter().append("g") .attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; }); |
مرحله ۵ : افزودن عناصر rect ، عناصر rect را به مقیاس اضافه کنید، همانطور که در زیر نشان داده شده است.
1 2 3 4 5 | g.append("rect") .attr("width", function (d) { return scale(d); }) .attr("height", barHeight - margin) |
مرحله ۶ : نمایش اطلاعات ، اکنون داده ها را با استفاده از کد داده شده در زیر نشان دهید.
1 2 3 4 5 | g.append("text") .attr("x", function (d) { return (scale(d)); }) .attr("y", barHeight / 2) .attr("dy", ".35em") .text(function (d) { return d; }); |
مرحله ۷ : عملکرد مثال، اکنون، ما یک نمودار نواری را با استفاده از تابع ()d3.scaleLinear به صورت زیر ایجاد می کنیم.
یک صفحه وب با نام “scales.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 | <!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> var data = [100, 200, 300, 350, 400, 250] var width = 500, barHeight = 20, margin = 1; var scale = d3.scaleLinear() .domain([d3.min(data), d3.max(data)]) .range([100, 400]); var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", barHeight * data.length); var g = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; }); g.append("rect") .attr("width", function (d) { return scale(d); }) .attr("height", barHeight - margin) g.append("text") .attr("x", function (d) { return (scale(d)); }) .attr("y", barHeight / 2).attr("dy", ".35em") .text(function (d) { return d; }); </script> </body> </html> |
کد بالا نتیجه ی زیر را در مرورگر نمایش می دهد.
آموزش مقیاس API در D3.js و پیکربندی API در D3.js به اتمام رسید . D3 به شما این امکان را می دهد که به کمک HTML،CSS و JAVA SCRIPT به داده ها زندگی ببخشید یا اصلاحا نمودارهایی متحرک رسم کنید.در جلسه بعد محور API در D3.js را فرا خواهید گرفت.