۱۹
خرداد

جلسه ۰۵ : پیوند داده در D3.js

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

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

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در جلسه پنجم از دوره فریم ورک D3.js ، مفهوم پیوند داده در D3.js را باز خواهیم کرد.پیوند داده یک مفهوم مهم دیگر در D3.js است. این کارایی با انتخاب ها انجام می شود و ما را قادر به دستکاری سند HTML با توجه به مجموعه داده های ما (مجموعه ای از مقادیر عددی) می سازد. عملکرد داده ها در D3.js نیز به شما عزیزان آموزش داده میشود.به طور پیش فرض، D3.js در متد های خود داده ها را به بالاترین اولویت اختصاص می دهد و هر آیتم در مجموعه داده ها مربوط به یک عنصر HTML است.

پیوند داده در D3.js

پیوند داده چیست؟

پیوند داده در D3.js به ما امکان اصلاح و حذف عناصر (عنصر HTML و همچنین عناصر SVG تعبیه شده) بر اساس داده های موجود در سند HTML موجود را می دهد.

به طور پیش فرض، هر آیتم داده در پیوند داده مربوط به یک عنصر (گرافیکی) در سند است.

با تغییر دادن داده ها، عنصر مربوطه نیز می تواند به راحتی تغییر داده شود. پیوند داده ارتباط نزدیک بین داده های ما و عناصر گرافیکی سند ایجاد می کند.

پیوند داده دستکاری عناصر بر اساس داده ها را تبدیل به یک روند بسیار ساده و آسان می کند.

پیوند داده در D3.js چگونه کار می کند؟

هدف اصلی پیوند داده در D3.js این است که عناصر سند موجود را با مجموعه داده های داده شده ترسیم کند. به این صورت که یک نمایش مجازی از سند را با توجه به مجموعه داده داده شده ایجاد می کند و متدهایی را برای کار با نمایش مجازی فراهم می کند. اجازه دهید یک مجموعه داده ساده را در زیر نشان بدهیم.

مثال :

[10, 20, 30, 25, 15]

1	[10, 20, 30, 25, 15]

داده ها با پنج آیتم تنظیم می شوند بنابراین، می توان آن را به پنج عنصر سند ترسیم کرد.
با استفاده از متد سلکتورهای ()selectAll و متد ()data در data join، عنصر li را از سند زیر ترسیم(Map) کنید.

HTML

مثال :

<ul id = "list">
   <li><li>
   <li></li>
</ul>

</ul>

D3.js code

مثال :

d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

1	d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

اکنون در سند پنج عنصر مجازی وجود دارد. دو عنصر مجازی دو عنصرli است که در سند تعریف شده است همانطور که در زیر نشان داده شده است :

مثال :

1. li - 10
2. li - 20

1 2	1. li - 10 2. li - 20

ما می توانیم از تمام متدهای اصلاح عنصر selector مانند ()attr ()، style ()، text و… برای دو li که در زیر نشان داده شده است استفاده کنیم.

مثال :

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

d3.select("#list").selectAll("li")

.data([10, 20, 30, 25, 15])

.text(function(d) { return d; });

تابع در متد ()text برای دریافت عناصر li داده های ترسیم شده استفاده می شود.

در اینجا، d نشان دهنده ۱۰ برای اولین عنصر li و ۲۰ برای عنصر li دیگر است.
سه عنصر بعدی می تواند به هر عنصر دیگری ترسیم شود اینکار را می توان با استفاده از متد ()enter درdata join و متد ()appen در انتخابگرها انجام داد. متد ()enter دسترسی به داده های باقیمانده را فراهم می کند (که به عناصر موجود نمایش داده نمی شود) و متد ()append برای ایجاد عنصر جدید از داده های مربوطه استفاده می شود.
اجازه دهید ما برای موارد باقیمانده داده نیز، li را ایجاد کنیم. نقشه داده به شرح زیر است :

مثال :

3. li - 30
4. li - 25
5. li - 15

3. li - 30

4. li - 25

5. li - 15

کد برای ایجاد یک عنصر li به صورت زیر می باشد :

مثال :

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) 
      { return "This is dynamically created element and the value is " + d; });

d3.select("#list").selectAll("li")

.data([10, 20, 30, 25, 15])

.text(function(d) { return "This is pre-existing element and the value is " + d; })

.enter()

.append("li")

.text(function(d)

{ return "This is dynamically created element and the value is " + d; });

پیوند داده یا Data join یک متد دیگر به نام ()exit برای پردازش داده به صورت پویا از مجموعه داده ها را دارد که به صورت زیر نشان داده شده است.

مثال :

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

d3.selectAll("li")

.data([10, 20, 30, 15])

.exit()

.remove()

در اینجا، ما چهار مورد از مجموعه داده ها و لایه مربوطه آن را با استفاده از متد ()exitو ()remove حذف کردیم. کد کامل به شرح زیر است :

مثال :

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <ul id = "list">
         <li></li>
         <li></li>
      </ul>
        
      <input type = "button" name = "remove" value = "Remove fourth value" 
         onclick = "javascript:remove()" />
      
      <script>
         d3.select("#list").selectAll("li")
            .data([10, 20, 30, 25, 15])
            .text(function(d) 
               { return "This is pre-existing element and the value is " + d; })
            .enter()
            .append("li")
            .text(function(d) 
               { return "This is dynamically created element and the value is " + d; });
             
         function remove() {
            d3.selectAll("li")
            .data([10, 20, 30, 15])
            .exit()
            .remove()
         }
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body { font-family: Arial; }

</style>

</head>

<body>

</ul>

<input type = "button" name = "remove" value = "Remove fourth value"

onclick = "javascript:remove()" />

d3.select("#list").selectAll("li")

.data([10, 20, 30, 25, 15])

.text(function(d)

{ return "This is pre-existing element and the value is " + d; })

.enter()

.append("li")

.text(function(d)

{ return "This is dynamically created element and the value is " + d; });

function remove() {

d3.selectAll("li")

.data([10, 20, 30, 15])

.exit()

.remove()

}

</script>

</body>

</html>

نتیجه کد بالا به شرح زیر می باشد : پیوند داده در D3.js

متدهای پیوند داده در D3.js

پیوند داده چهار روش زیر را برای کار با مجموعه داده فراهم می کند :

()datum
()data
()enter
()exit

اجازه دهید هر کدام از این متدها را با جزییات بیان کنیم.

متد ()datum

()datum برای تعیین ارزش یک عنصر تک در سند HTML استفاده می شود.

این عنصر زمانی استفاده می شود که عنصر انتخاب شده با انتخابگرها انتخاب شود.

به عنوان مثال

ما می توانیم یک عنصر موجود (تگ p) را با استفاده از متد () select انتخاب کنیم و سپس داده ها را با استفاده از متد ()datum تنظیم کنیم. هنگامی که داده ها تنظیم می شوند، می توانیم متن انتخاب شده را تغییر دهیم یا عنصر جدیدی را اضافه کنیم و متن را با استفاده از داده ها توسط ()datum تعیین کنیم.
برای درک بیشتر، یک صفحه “datajoin_datum.html” ایجاد کنید و کد زیر را به آن اضافه کنید :

مثال :

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <p></p>
      <div></div>
      <script>
         d3.select("p")
         .datum(50)
         .text(function(d) { 
            return "Used existing paragraph element and the data " + d + " is assigned."; 
         });
         
         d3.select("div")
         .datum(100)
         .append("p")
         .text(function(d) { 
            return "Created new paragraph element and the data " + d + " is assigned."; 
         });
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p></p>

d3.select("p")

.datum(50)

.text(function(d) {

return "Used existing paragraph element and the data " + d + " is assigned.";

});

d3.select("div")

.datum(100)

.append("p")

.text(function(d) {

return "Created new paragraph element and the data " + d + " is assigned.";

});

</script>

</body>

</html>

خروجی کد بالا به صورت زیر است :

متد ()data

این متد برای اختصاص یک داده به مجموعه ای از عناصر در یک سند HTML استفاده می شود.

یک بار که عناصر HTML با انتخابگرها انتخاب می شوند استفاده می شود.

در مثال لیست ما،از آن برای تنظیم مجموعه داده برای انتخابگر li استفاده کرده ایم.

مثال :

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15]);

1 2	d3.select("#list").selectAll("li") .data([10, 20, 30, 25, 15]);

متد ()enter

مجموعه ای از آیتم داده را صادر می کند که برای آن هیچ عنصر گرافیکی وجود نداشته است. در مثال زیر، ما آن را برای ایجاد عناصر جدید li استفاده می کنیم.

مثال :

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) { return "This is dynamically created element and the value is " + d; });

d3.select("#list").selectAll("li")

.data([10, 20, 30, 25, 15])

.text(function(d) { return "This is pre-existing element and the value is " + d; })

.enter()

.append("li")

.text(function(d) { return "This is dynamically created element and the value is " + d; });

متد ()exit

مجموعه ای از عناصر گرافیکی که برای آنها هیچ داده ای وجود ندارد را خروجی می دهد.
در این مثال ما از آن استفاده کرده ایم تا یکی از عناصر li را به صورت پویا با از بین بردن آیتم داده در مجموعه داده استفاده کنیم.

مثال :

function remove() {
   d3.selectAll("li")
      .data([10, 20, 30, 15])
      .exit()
      .remove()
}

function remove() {

d3.selectAll("li")

.data([10, 20, 30, 15])

.exit()

.remove()

}

عملکرد داده ها در D3.js

در بخش تغییر DOM، در مورد متد های مختلف ویرایش DOM در D3.js مانند ()style و ()text و… یاد گرفتیم اکنون می خواهیم به بررسی عملکرد داده ها در D3.js بپردازیمم.

هر یک از این توابع معمولا به عنوان پارامتر آن مقدار ثابت را می گیرد.

با این وجود، در زمینه Data join، عملکرد داده ها در D3.js بعنوان یک پارامتر ناشناس عمل می کند.

این تابع ناشناس، داده های مربوطه و شاخص مجموعه داده تعیین شده را با استفاده از متد ()data می گیرد.

بنابراین، این عملکرد ناشناس برای هر یک از مقادیر داده شده ما به DOM تعلق می گیرد. تابع ()text زیر را در نظر بگیرید.

مثال :

.text(function(d, i) {
   return d;
});

.text(function(d, i) {

return d;

});

در این تابع، می توانیم هر منطقی را برای دستکاری داده ها اعمال کنیم. اینها توابع ناشناس هستند، به این معنی که هیچ نامی در ارتباط با تابع وجود ندارد. به غیر از پارامتر داده (d) و (index (i، می توانیم با استفاده از این کلمه کلیدی به شیء زیر دسترسی پیدا کنیم.

مثالی از عملکرد داده ها در D3.js :

مثال :

.text(function (d, i) {
   console.log(d); // the data element
   console.log(i); // the index element
   console.log(this); // the current DOM object
   return d;
});

.text(function (d, i) {

console.log(d); // the data element

console.log(i); // the index element

console.log(this); // the current DOM object

return d;

});

مثال زیر را در نظر بگیرید :

مثال :

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <p></p>
      <p></p>
      <p></p>
      <script>
         var data = [1, 2, 3];
         var paragraph = d3.select("body")
         .selectAll("p")
         .data(data)
         .text(function (d, i) {
            console.log("d: " + d);
            console.log("i: " + i);
            console.log("this: " + this);
            return "The index is " + i + " and the data is " + d;
         });
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body { font-family: Arial; }

</style>

</head>

<body>

<p></p>

var data = [1, 2, 3];

var paragraph = d3.select("body")

.selectAll("p")

.data(data)

.text(function (d, i) {

console.log("d: " + d);

console.log("i: " + i);

console.log("this: " + this);

return "The index is " + i + " and the data is " + d;

});

</script>

</body>

</html>

کد اسکریپت بالا خروجی زیرا تولید خواهد کرد :

مثال :

The index is 0 and the data is 1

The index is 1 and the data is 2

The index is 2 and the data is 3

The index is 0 and the data is 1

The index is 1 and the data is 2

The index is 2 and the data is 3

در مثال بالا، پارامتر “d” عنصر داده شما را به شما می دهد، همچنین”i” یک فهرست داده ها را در آرایه می دهد و “this” یک مرجع از عنصر فعلی DOM است. در این مثال this عنصر پاراگراف است. توجه داشته باشید که ما تابع داده (data.) را در بالا نامگذاری کردیم.

تابع ()data اطلاعات را برای عناصر انتخاب شده فراهم می کند، که در مثال ما آرایه داده است.

کلام آخر

عملکرد داده ها در D3.js و پیوند داده با ذکر متدهای پرکاربرد در D3.js به پایان رسید.با ما همراه باشید تا در جلسه بعد مفهوم SVG در D3.js را فرا بگیرید.

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

D3.js code ,عملکرد داده ها در D3.js ,متد ()datum ,متد ()exit در D3.js ,مفهوم پیوند داده در D3.js

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

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

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

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

جلسه ۰۵ : پیوند داده در D3.js

مقدمه

پیوند داده در D3.js

پیوند داده در D3.js چگونه کار می کند؟

HTML

D3.js code

متدهای پیوند داده در D3.js

متد ()datum

به عنوان مثال

متد ()data

متد ()enter

متد ()exit

عملکرد داده ها در D3.js

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ