۱۹
خرداد

جلسه ۰۴ : انتخاب در D3.js

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

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

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، انتخاب یکی از مفاهیم اصلی در زبان D3.js می باشد که برپایه انتخابگرهای CSS است. انتخاب در D3.js این اجازه را به ما می دهد که یک یا چند عنصر را در یک صفحه وب انتخاب کنیم. علاوه بر این، می توانیم در ارتباط با مجموعه داده های از پیش تعریف شده، آنها را تغییر، افزودن یا حذف کنیم. در این فصل، نحوه استفاده از انتخاب ها برای ایجاد نمایش داده ها(data visualizations) و انتخابگرهای D3.js را خواهیم دید. همچنین متد ()append و متد ()selectAll آشنا خواهید شد.

انتخاب در D3.js

D3.js برای انتخاب عناصر از صفحه HTML دو روش دارد:

() select :

تنها یک عنصر DOM رامطابق با انتخابگر CSS داده شده انتخاب می کند. همچنین اگر بیش از یک عنصر برای انتخابگر CSS داده شده وجود داشته باشد، تنها اولین مورد را انتخاب می کند.

متد ()selectAll :

همه عناصر DOM را مطابق با انتخابگر CSS داده شده انتخاب می کند. اگر شما با انتخاب عناصر در jQuery آشنا هستید، انتخابگرهای D3.js تقریبا مشابه آن ها هستند.
اکنون به هر کدام از متد ها با جزییات می پردازیم.

متد () select :

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

تگ کردن یک عنصر HTML (به عنوان مثال div، h1، p، span و…)
نام کلاس یک عنصر HTML
شناسه یک عنصر HTML

اجازه دهید مفهوم را با ذکر مثال روشن تر کنیم.

انتخاب در D3.js توسط تگ

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

مثال :

d3.select(“div”)

1	d3.select(“div”)

مثال: صفحه “select_by_tag.html” را ایجاد کرده و تغییرات زیر را اضافه کنید :

مثال :

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

   <body>
      <div>
         Hello World!    
      </div>
      
      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

Hello World!

</div>

alert(d3.select("div").text());

</script>

</body>

</html>

هنگام اجرای صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید :

مثال :

Hello World!

1	Hello World!

انتخاب بر اساس نام کلاس

عناصر HTML را با استفاده از نلم کلاس CSS توسط دستور زیر می توان انتخاب کرد.

مثال :

d3.select(“.<class name>”)

1	d3.select(“.<class name>”)

یک صفحه وب “select_by_class.html” را ایجاد کنید و تغییرات زیر را اعمال نمایید :

مثال :

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello World!

</div>

alert(d3.select(".myclass").text());

</script>

</body>

</html>

هنگامی که بخواهید صفحه ایجاد شده را در مرورگر باز کنید خروجی زیر نشان داده می شود :

مثال :

Hello World!

1	Hello World!

انتخاب در D3.js توسط شناسه

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

مثال :

d3.select(“#<id of an element>”)

1	d3.select(“#<id of an element>”)

یک صفحه وب “select_by_id.html” ساخته و تغییرات زیر را اضافه کنید.

مثال :

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

   <body>
      <div id = "hello">
         Hello World!
      </div>
      
      <script>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello World!

</div>

alert(d3.select("#hello").text());

</script>

</body>

</html>

با درخواست صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید.

مثال :

Hello World!

1	Hello World!

اضافه کردن عناصر DOM توسط انتخاب در D3.js

انتخاب در D3.js ، متدهای ()append و ()text را برای اضافه کردن عناصر جدید به اسناد HTML موجود را فراهم می کند. در این بخش در مورد اضافه کردن عناصر DOM با جزئیات توضیح داده شده است.

متد ()append

متد ()append یک عنصر جدید را به عنوان آخرین فرزند عنصر در انتخاب فعلی اضافه می کند. این متد همچنین می تواند سبک عناصر، ویژگی ها، خواص، محتوای HTML و متن را تغییر دهد.
یک صفحه وب “select_and_append.html” را ایجاد کرده و تغییرات زیر را اعمال کنید :

مثال :

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello World!

</div>

d3.select("div.myclass").append("span");

</script>

</body>

</html>

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

مثال :

Hello World!

1	Hello World!

در این مثال، متد ()append محدوده تگ جدید را در داخل تگ div مانند زیر نشان می دهد :

مثال :

<div class = "myclass">
   Hello World!<span></span>
</div>

Hello World!<span></span>

</div>

متد ()text

برای تنظیم محتوای عناصر انتخاب شده / اضافه شده استفاده می شود. اجازه دهید ما مثال فوق را تغییر دهیم و کاربرد متد ()text را در زیر نشان بدهیم.

مثال :

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello World!

</div>

d3.select("div.myclass").append("span").text("from D3.js");

</script>

</body>

</html>

اکنون صفحه را مجدد لود کنید خروجی زیر به شما نمایش داده می شود :

مثال :

Hello World! from D3.js

1	Hello World! from D3.js

اسکریپت فوق عملیات زنجیره ای انجام می دهد. D3.js هوشمندانه تکنیکی به نام سینتکس زنجیره ای که ممکن است jQuery آن را شناسایی کند استفاده می کند. با استفاده از متدهای زنجیره ای همراه با دوره ها، می توانید چندین اقدام را در یک خط کد انجام دهید. این عمل سریع و آسان است. همچنین همان اسکریپت می تواند بدون سینتکس زنجیره ای مانند زیر نشان داده شود.

مثال :

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

var body = d3.select("div.myclass");

var span = body.append("span");

span.text("from D3.js");

اصلاح عناصر

D3.js متدهای متفاوتی را برای تغییر محتوا و سبک عناصر انتخاب شده فراهم می کند از جمله این متدها میتوان به ()html()،attr و() style اشاره نمود.
بگذارید ببینیم چگونه از متد های اصلاح در این فصل استفاده کنیم.

متد html()

این متد برای تنظیم محتوای HTML از عناصر انتخاب شده / اضافه شده استفاده می شود.
یک صفحه وب “select_and_add_html.html” ایجاد کنید و کد زیر را اضافه کنید.

مثال :

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello World!

</div>

d3.select(".myclass").html("Hello World! <span>from D3.js</span>");

</script>

</body>

</html>

با باز نمودن این صفحه در مرورگر، نتیجه زیر نمایش داده می شود :

مثال :

Hello World! from D3.js

1	Hello World! from D3.js

متد ()attr

متد ()attr برای افزودن یا به روزرسانی صفات عناصر انتخاب شده مورد استفاده قرار می گیرد. برای درک بهتر یک صفحه وب “select_and_modify.html” را ایجاد کنید و کد زیر را اضافه نمایید.

مثال :

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello World!

</div>

d3.select(".myclass").attr("style", "color: red");

</script>

</body>

</html>

با درخواست صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید :

مثال :

Hello World!

1	Hello World!

متد ()style

این متد برای تعیین ویژگی سبک عناصر انتخاب شده استفاده می شود. یک صفحه وب “select_and_style.html” ایجاد کنید و کد زیر را اضافه کنید.

مثال :

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

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello World!

</div>

d3.select(".myclass").style("color", "red");

</script>

</body>

</html>

با درخواست صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید :

مثال :

Hello World!

1	Hello World!

متد ()classed

متد ()classed به طور انحصاری برای تعیین ویژگی “class” یک عنصر HTML استفاده می شود. از آنجا که یک عنصر HTML تنها می تواند چندین کلاس داشته باشد؛ ما باید هنگام اختصاص کلاس به عنصر HTML مراقب باشیم. این متد می داند چگونه یک یا چند کلاس را بر عناصر اداره کند و آن را اجرا کند.

اضافه کردن کلاس : برای اضافه کردن یک کلاس، پارامتر دوم متد کلاس باید درست باشد.
به مثال زیر توجه کنید :
مثال :
d3.select(".myclass").classed("myanotherclass", true);
1
d3.select(".myclass").classed("myanotherclass", true);
حذف کلاس : برای حذف یک کلاس، پارامتر دوم متد کلاس باید به false تنظیم شود. مانند مثال زیر :
مثال :
d3.select(".myclass").classed("myanotherclass", false);
1
d3.select(".myclass").classed("myanotherclass", false);
بررسی کلاس: برای بررسی وجود یک کلاس، فقط پارامتر دوم را حذف کنید و نام کلاسی را که پرس و جو می کنید، منتقل کنید. این درست است، اگر وجود داشته باشد، درست است، اگر نباشد مقدار غلط را برمی گرداند.
مثال :
d3.select(".myclass").classed("myanotherclass");
1
d3.select(".myclass").classed("myanotherclass");

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

تعویض کلاس : برای تعویض یک کلاس به حالت مخالف ، اگر قبلا وجود داشته باشد باید آن را حذف کنیم، سپس اگر وجود نداشت آن را اضافه کنید – شما می توانید یکی از موارد زیر را انجام دهید.برای عنصر تک، کد ممکن است مانند زیر نشان داده شود :

مثال :

var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

1 2	var element = d3.select(".myclass") element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

متد ()selectAll

متد ()selectAll برای انتخاب چندین عنصر در سند HTML استفاده می شود. متد select اولین عنصر را انتخاب می کند، اما روش selectAll تمام عناصری را که با رشته انتخاب خاص مطابقت دارند، انتخاب می کند..اگر هیچ انتخابی مطابقت نداشته باشد، انتخاب را خالی باز می گرداند. در متد ()selectAll ما می توانیم تمام متدهای اصلاح و یا افزودنی مانند :append() html ()، text ()، attr ()، style ()، class ، و… را استفاده کنیم. در متد ()selectAll، متد ها بر تمام عناصر تطبیق شده تاثیر می گذارند.
با ایجاد یک صفحه وب جدید “select_multiple.html” مفهوم را بهتر می فهمیم.صفحه را ایجاد و اسکریپت زیر را اضافه کنید :

مثال :

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

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2 class = "myclass">Message</h2>

Hello World!

</div>

d3.selectAll(".myclass").attr("style", "color: red");

</script>

</body>

</html>

با درخواست صفحه وب از طریق مرورگر، خروجی زیر را روی صفحه نمایش خواهید دید.

مثال :

Message
Hello World!

1 2	Message Hello World!

در اینجا، متد ()attr برای هر دو تگ div و h2 اعمال می شود و رنگ متن در هر دو تگ به قرمز تغییر می کند.

کلام آخر

با مفهوم انتخاب در D3.js آشنا شدید و کارکرد متدهایی مانند : متد ()append ، متد ()selectAll و … را نیز فرا گرفتید.امیدوارم از طالب ذکر شده بهره مند شده باشید.

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

اضافه کردن عناصر DOM توسط انتخاب در D3.js ,انتخاب در D3.js ,انتخابگرهای D3.js ,متد ()selectAll

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

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

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

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

جلسه ۰۴ : انتخاب در D3.js

مقدمه

انتخاب در D3.js

() select :

متد ()selectAll :

متد () select :

انتخاب در D3.js توسط تگ

انتخاب بر اساس نام کلاس

انتخاب در D3.js توسط شناسه

اضافه کردن عناصر DOM توسط انتخاب در D3.js

متد ()append

متد ()text

اصلاح عناصر

متد html()

متد ()attr

متد ()style

متد ()classed

متد ()selectAll

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ