۱۹
خرداد

جلسه ۱۱ : گراف ها در D3.js

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ،جلسه ای دیگر از آموزش های دوره D3.js را با مبحث کاربرد گراف ها در D3.js آغاز می کنیم.یک گراف فضای مسطح دو بعدی است که مانند یک مستطیل نمایان می شود. Graph دیتا استراکچری است که به منظور مدل‌سازی مجموعه‌ای از اشیاء و ارتباطات مابین آن‌ها مورد استفاده قرار می‌گیرد .

گراف ها در D3.js

گراف ها در D3.js دارای فضای مختصاتی هستند که در آن x = 0 و y = 0 مختصات در پایین سمت چپ قرار دارد.

با توجه به فضای مختصات کارتیزن ریاضی ، نمودارها مختصات X را از چپ به راست افزایش می دهند و مختصات Y از پایین به بالا رشد می کنند.

وقتی در مورد طراحی یک دایره با مختصات x = 30 و y = 30 صحبت می کنیم :

۳۰ واحد از پایین به سمت چپ به راست و سپس ۳۰ واحد از پایین به بالا حرکت می کنیم.

فضای مختصات SVG

فضای مختصات SVG به همان شیوه ای عمل می کند که یک فضای مختصات گراف ریاضی کار می کند.

به جز دو ویژگی مهم که به آن اضافه شده است :

فضای مختصات SVG دارای x = 0 و y = 0 مختصات در سمت چپ قسمت بالا قرار دارد.

فضای مختصات SVG مختصات Y از بالا به پایین در حال رشد است.

گراف فضای مختصات SVG

وقتی ما در مورد طراحی یک دایره با مختصات های x = 30 و y = 30 در فضای مختصات SVG صحبت میکنیم در واقع :

۳۰ واحد از بالا به سمت چپ به سمت راست و سپس ۳۰ واحد به پایین میرسیم.

این تعریف در مثال زیر شرح داده شده است.

مثال :

var svgContainer = d3
   .select("body")
   .append("svg")
   .attr("width", 200)
   .attr("height", 200);

var svgContainer = d3

.select("body")

.append("svg")

.attr("width", 200)

.attr("height", 200);

در نظر بگیرید، عنصر SVG به عنوان یک گراف ۲۰۰ واحد عرض و ۲۰۰ واحد ارتفاع است.

اکنون می دانیم که مختصات صفر X و Y در سمت چپ بالا هستند.

ما هم اکنون می دانیم که مانند مختصات Y رشد می کند، و از بالا به پایین گراف حرکت می کند.

شما می توانید عناصر SVG را به صورت زیر نشان دهید.

مثال :

var svgContainer = d3
   .select("body").append("svg")
   .attr("width", 200)
   .attr("height", 200)
   .style("border", "1px solid black");

var svgContainer = d3

.select("body").append("svg")

.attr("width", 200)

.attr("height", 200)

.style("border", "1px solid black");

مثال کاربرد گراف ها در D3.js

اجازه دهید نمونه ای از گراف خطی را در نظر بگیریم. Line Graph همان گراف خطی است و برای تجسم مقدار چیزی در طول زمان استفاده می شود.

همچنین مقایسه دو متغیر را مشخص می کند. هر متغیر در امتداد محور قرار گرفته است.

یک گراف خطی دارای یک محور عمودی و یک محور افقی است.

در این مثال از کاربرد گراف ها در D3.js ، می توانیم سوابق فایل CSV را به عنوان رشد جمعیت هند در سال های ۲۰۰۶ تا ۲۰۱۷ به ثبت برسانیم.

ابتدا یک data.csv ایجاد کنید تا رکوردهای جمعیت نشان داده شود.

یک فایل CSV جدید در پوشه D3 خود ایجاد کنید :

مثال :

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

year,population

2006,40

2008,45

2010,48

2012,51

2014,53

2016,57

2017,62

اکنون فایل را ذخیره کرده و مراحل زیر را برای رسم یک نمودار خطی در D3 انجام دهید.

ما همه مراحل را قدم به قدم و با جزییات پیش می بریم.

مرحله ۱ : افزودن سبک ، اجازه دهید یک سبک به کلاس خطی با استفاده از کد زیر داده شود.

مثال :

.line {
   fill: none;
   stroke: green;
   stroke-width: 5px;
}

.line {

fill: none;

stroke: green;

stroke-width: 5px;

}

مرحله ۲ : تعریف متغیرها ، ویژگی های SVG در زیر تعریف شده اند.

مثال :

var margin = {top: 20, right: 20, bottom: 30, left: 50},
   width = 960 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

var margin = {top: 20, right: 20, bottom: 30, left: 50},

width = 960 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

ابتدا، چهار حاشیه را تعریف می کنیم که بلوک هایی را که در گراف قرار دارند را احاطه کند.

مرحله ۳ : تعریف خط ، یک خط جدید را با استفاده از تابع ()d3.line که در زیر نشان داده شده است، رسم کنید.

مثال :

var valueline = d3.line()
   .x(function(d) { return x(d.year); })
   .y(function(d) { return y(d.population); });

var valueline = d3.line()

.x(function(d) { return x(d.year); })

.y(function(d) { return y(d.population); });

در اینجا، Year نشان دهنده داده ها در رکوردهای محور X است و population به داده ها در محور Y اشاره می کند.

مرحله ۴ : اضافه کردن ویژگی های SVG ، اضافه کردن ویژگی های SVG و عناصر گروه با استفاده از کد زیر صورت می گیرد.

مثال :

var svg = d3.select("body").append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g").attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

var svg = d3.select("body").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g").attr("transform",

"translate(" + margin.left + "," + margin.top + ")");

در اینجا، ما عناصر گروه را اضافه کرده و تغییرات را اعمال کردیم.
مرحله ۵ : خواندن داده ها ،اکنون می توانیم داده ها را از قسمت data.csv داده هایمان بخوانیم.

مثال :

d3.csv("data.csv", function(error, data) {
   if (error) throw error;
}

d3.csv("data.csv", function(error, data) {

if (error) throw error;

}

در اینجا data.csv موجود نیست، پس با خطا مواجه می شود.

مرحله ۶ : فرمت کردن داده، اکنون داده ها را با استفاده از کد زیر قالب بندی کنید.

مثال :

data.forEach(function(d) {
   d.year = d.year;
   d.population = +d.population;
});

data.forEach(function(d) {

d.year = d.year;

d.population = +d.population;

});

کد فوق تضمین می کند که تمام مقادیری که از فایل CSV خارج می شوند، به درستی مرتب شده و قالب بندی می شوند.

هر ردیف شامل دو مقدار است: یک مقدار برای سال و دیگری برای جمعیت.

این تابع یک مقدار سطر “year” و “population” را یک بار و در یک زمان می گیرد.

مرحله ۷ : تنظیم مقیاس محدوده، پس از قالب بندی داده، شما می توانید محدوده مقیاس برای X و Y را تنظیم کنید.

مثال :

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

1 2	x.domain(d3.extent(data, function(d) { return d.year; })); y.domain([0, d3.max(data, function(d) { return d.population; })]);

مرحله ۸ : مسیر را اضافه کنید، همانطور که در پایین نشان داده شده است مسیر و داده ها را اضافه کنید.

مثال :

svg.append("path").data([data])
   .attr("class", "line").attr("d", valueline);

1 2	svg.append("path").data([data]) .attr("class", "line").attr("d", valueline);

مرحله ۹ : اضافه کردن محور X ، حالا شما می توانید محور X را با استفاده از کد زیر اضافه کنید.

مثال :

svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x));

svg.append("g")

.attr("transform", "translate(0," + height + ")")

.call(d3.axisBottom(x));

مرحله ۱۰ :اضافه کردن محور Y ، ما می توانیم محور Y را همانطور که در زیر نشان داده شده است به گروه اضافه کنیم .

مثال :

svg.append("g")
   .call(d3.axisLeft(y));

1 2	svg.append("g") .call(d3.axisLeft(y));

مرحله ۱۱: عملکرد مثال ، کد کامل در بلوک کد زیر داده شده است.

یک صفحه وب ساده linegraphs.html را ایجاد کرده و تغییرات زیر را به آن اضافه کنید.

graph.html

مثال :

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style> 
         .line {
            fill: none;
            stroke: green;
            stroke-width: 5px;
         }
      </style>
   </head>

   <body>
      <script>
         // set the dimensions and margins of the graph
         var margin = {top: 20, right: 20, bottom: 30, left: 50},
         width = 960 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;

         // set the ranges
         var x = d3.scaleTime().range([0, width]);
         var y = d3.scaleLinear().range([height, 0]);

         // define the line
         var valueline = d3.line()
            .x(function(d) { return x(d.year); })
            .y(function(d) { return y(d.population); });

         // append the svg obgect to the body of the page
         // appends a 'group' element to 'svg'
         // moves the 'group' element to the top left margin
         var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g").attr("transform",
               "translate(" + margin.left + "," + margin.top + ")");

         // Get the data
         d3.csv("data.csv", function(error, data) {
            if (error) throw error;
            // format the data
            data.forEach(function(d) {
               d.year = d.year;
               d.population = +d.population;
            });

            // Scale the range of the data
            x.domain(d3.extent(data, function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);

            // Add the valueline path.
            svg.append("path")
               .data([data])
               .attr("class", "line")
               .attr("d", valueline);

            // Add the X Axis
            svg.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x));

            // Add the Y Axis
            svg.append("g")
               .call(d3.axisLeft(y));
         });
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.line {

fill: none;

stroke: green;

stroke-width: 5px;

}

</style>

</head>

<body>

// set the dimensions and margins of the graph

var margin = {top: 20, right: 20, bottom: 30, left: 50},

width = 960 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

// set the ranges

var x = d3.scaleTime().range([0, width]);

var y = d3.scaleLinear().range([height, 0]);

// define the line

var valueline = d3.line()

.x(function(d) { return x(d.year); })

.y(function(d) { return y(d.population); });

// append the svg obgect to the body of the page

// appends a 'group' element to 'svg'

// moves the 'group' element to the top left margin

var svg = d3.select("body").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g").attr("transform",

"translate(" + margin.left + "," + margin.top + ")");

// Get the data

d3.csv("data.csv", function(error, data) {

if (error) throw error;

// format the data

data.forEach(function(d) {

d.year = d.year;

d.population = +d.population;

});

// Scale the range of the data

x.domain(d3.extent(data, function(d) { return d.year; }));

y.domain([0, d3.max(data, function(d) { return d.population; })]);

// Add the valueline path.

svg.append("path")

.data([data])

.attr("class", "line")

.attr("d", valueline);

// Add the X Axis

svg.append("g")

.attr("transform", "translate(0," + height + ")")

.call(d3.axisBottom(x));

// Add the Y Axis

svg.append("g")

.call(d3.axisLeft(y));

});

</script>

</body>

</html>

اکنون درخواست از مرورگر فرستاده و در نهایت نتیجه زیر را خواهیم دید. کاربرد گراف ها در D3.js

کلام آخر

آموزش کاربرد گراف ها در D3.js به اتمام رسید، امیدوارم از مطالب ذکر شده بهره مند شده باشید. با ما همراه باشید تا در جلسه بعد جغرافیا در D3.js را فرا بگیرید.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۱ : گراف ها در D3.js

مقدمه

گراف ها در D3.js

فضای مختصات SVG

گراف فضای مختصات SVG

مثال کاربرد گراف ها در D3.js

یک گراف خطی دارای یک محور عمودی و یک محور افقی است.

مرحله ۱ : افزودن سبک ، اجازه دهید یک سبک به کلاس خطی با استفاده از کد زیر داده شود.

مرحله ۳ : تعریف خط ، یک خط جدید را با استفاده از تابع ()d3.line که در زیر نشان داده شده است، رسم کنید.

مرحله ۴ : اضافه کردن ویژگی های SVG ، اضافه کردن ویژگی های SVG و عناصر گروه با استفاده از کد زیر صورت می گیرد.

مرحله ۶ : فرمت کردن داده، اکنون داده ها را با استفاده از کد زیر قالب بندی کنید.

مرحله ۷ : تنظیم مقیاس محدوده، پس از قالب بندی داده، شما می توانید محدوده مقیاس برای X و Y را تنظیم کنید.

مرحله ۱۱: عملکرد مثال ، کد کامل در بلوک کد زیر داده شده است.

graph.html

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ