۱۹
خرداد

جلسه ۱۴ : مجموعه های API در D3.js

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

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

فهرست

مقدمه

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

مجموعه های API در D3.js

ابتدا به پیکربندی API می پردازیم. شما می توانید API را با استفاده از اسکریپت زیر پیکربندی کنید.

مثال :

<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script>

</script>

</script>

اجازه دهید از طریق به هر یک از این API با جزئیات بپردازیم.

API اشیاء در D3.js

یک نوع داده مهم است. متد های زیر را پشتیبانی می کند :
(d3.keys(object : این متد شامل کلید های property object است و یک آرایه از اسامی property را باز می گرداند.

(d3.values (object : این متد شامل مقادیر شی است و یک آرایه از مقادیر property را باز می گرداند.

(d3.entries (object :این روش برای بازگرداندن یک آرایه حاوی هر دو کلید و مقادیر شی مشخص شده است. هر ورودی یک شی با یک کلید و مقدار همراه است.

مثال : اجازه دهید کد زیر را در نظر بگیریم.

مثال :

d3.entries({one: 1})

1	d3.entries({one: 1})

در این مثال کلید one است و مقدار نیز ۱ می باشد.

مثال : یک صفحه object.html را ایجاد کنید و تغییرات زیر را به آن اضافه کنید.

مثال :

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

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};
         console.log(d3.keys(month));
         console.log(d3.values(month));
         console.log(d3.entries(month));
      </script>
   </body>
</html>

<html>

<head>

</head>

<body>

<h3>D3 collection API</h3>

var month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};

console.log(d3.keys(month));

console.log(d3.values(month));

console.log(d3.entries(month));

</script>

</body>

</html>

اکنون، از مرورگر درخواست کنید و پاسخ زیر را مشاهده کنید. مجموعه های API در D3.js

API نقشه ها در D3.js

نقشه حاوی مقادیر بر اساس جفت کلید و مقدار است. هر جفت کلیدی و مقدار به عنوان یک ورودی شناخته می شوند. نقشه شامل تنها کلید های منحصر به فرد است. همچنین برای جستجو، به روز رسانی و یا حذف عناصر بر اساس کلید مفید است . اجازه دهید وارد متد API نقشه های مختلف با جزییات شویم.

([[d3.map ([object [، key : این متد برای ایجاد یک نقشه جدید استفاده می شود. شیء برای کپی کردن تمام خواص قابل شمارش استفاده می شود.

(map.has (key : این متد برای بررسی اینکه آیا نقشه دارای یک ورودی برای رشته کلید مشخص شده است استفاده می شود.

(map.get (key : این متد برای بازگشت مقدار برای رشته کلید مشخص شده استفاده می شود.

(map.set (key، value : این متد برای تنظیم مقدار رشته کلید مشخص شده استفاده می شود. اگر نقشه قبلا یک رکورد برای یک رشته کلید داشته باشد، ورود قدیمی با مقدار جدید جایگزین می شود.

(map.remove(key : برای حذف نقشه ورودی استفاده می شود. اگر کلید مشخص نشده باشد، مقدار نادرست را باز می گرداند.

()map.clear : تمام مطالب را از نقشه حذف می کند.

()map.keys : آرایه ای از کلید های رشته را برای هر ورودی در نقشه باز می گرداند.

()map.values : آرایه ای از مقادیر برای هر ورودی در نقشه را باز می گرداند.

()map.entries : آرایه ای از اشیاء کلیدی است، مقدار را برای هر ورودی در این نقشه باز می گرداند.

(x) map.each (function) : این متد برای فراخوانی تابع مشخص شده برای هر ورودی در نقشه استفاده می شود.

()xi) map.empty) اگر و فقط اگر این نقشه دارای ورودی صفر باشد، مقداردرست را بر می گرداند.

()xii) map.size) : تعداد ورودی های نقشه را می دهد.

به عنوان مثال : یک صفحه وب با نام maps.html ایجاد کنید و تغییرات زیر را به آن اضافه کنید.

مثال :

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

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = d3.map([{name: "jan"}, {name: "feb"}], 
            function(d) { return d.name; });
         console.log(month.get("jan")); // {"name": "jan"}
         console.log(month.get("apr")); // undefined
         console.log(month.has("feb")); // true
         
         var map =  d3.map().set("fruit", "mango");
         console.log(map.get("fruit")); // mango
         console.log(map.remove("fruit")); // remove key and return true.
         console.log(map.size());    // size is 0 because key removed.
         console.log(map.empty());   // true
      </script>
   </body>
</html>

<html>

<head>

</head>

<body>

<h3>D3 collection API</h3>

var month = d3.map([{name: "jan"}, {name: "feb"}],

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

console.log(month.get("jan")); // {"name": "jan"}

console.log(month.get("apr")); // undefined

console.log(month.has("feb")); // true

var map = d3.map().set("fruit", "mango");

console.log(map.get("fruit")); // mango

console.log(map.remove("fruit")); // remove key and return true.

console.log(map.size()); // size is 0 because key removed.

console.log(map.empty()); // true

</script>

</body>

</html>

حالا از مرورگر درخواست کنید و پاسخ زیر را مشاهده فرمایید.

مجموعه های API در D3.js

به طور مشابه، شما همچنین می توانید عملیات دیگر را به همین ترتیب انجام دهید.

مجموعه API

یک مجموعه(Sets) مجموعه ای است که نمی تواند عناصر تکراری داشته باشد. این مجموعه انتزاع در ریاضی را مدل می کند. اجازه دهید متد های مختلف مجموعه ای API را با جزییات بیشتری بررسی کنیم.

([[d3.set ([array [، accessor : این متد برای ایجاد یک مجموعه جدید استفاده می شود. آرایه برای اضافه کردن مقادیر رشته مورد استفاده قرار می گیرد. و وجود Accessor اختیاری است.

(set.has (value : این متد برای بررسی اینکه آیا مجموعه دارای یک ورودی برای رشته مقدار مشخص شده است استفاده می شود.

(set.add (value : برای اضافه کردن رشته مقدار مشخص شده به مجموعه استفاده می شود.

(set.remove (value : برای حذف مجموعه ای که شامل رشته مقدار مشخص شده است استفاده می شود.

()set.clear :همه مقادیر را از مجموعه حذف می کند.

()set.values : این متد برای برگرداندن آرایه مقادیر به مجموعه استفاده می شود.

()set.empty : اگر و فقط اگر این مجموعه دارای مقادیر صفر باشد، مقدار درست را برمی گرداند.

()set.size :تعداد مقادیر موجود در مجموعه را می دهد.

به عنوان مثال : یک صفحه وب با نام sets.html را ایجاد کرده و تغییرات زیر را به آن اضافه کنید.

مثال :

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

   <body>
      <h3>D3 collection API</h3>
      <script>
         var fruits =  d3.set().add("mango")
          .add("apple").add("orange");
         console.log(fruits.has("grapes")); // return false.
         console.log(fruits.remove("apple")); //true
         console.log(fruits.size());    // size is 2
         console.log(fruits.empty());   // true
      </script>
   </body>
</html>

<html>

<head>

</head>

<body>

<h3>D3 collection API</h3>

var fruits = d3.set().add("mango")

.add("apple").add("orange");

console.log(fruits.has("grapes")); // return false.

console.log(fruits.remove("apple")); //true

console.log(fruits.size()); // size is 2

console.log(fruits.empty()); // true

</script>

</body>

</html>

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

مجموعه های API در D3.js

به طور مشابه، ما می توانیم عملیات دیگر را نیز به خوبی انجام دهیم.

API Nests

API Nests حاوی عناصر در آرایه است و در ساختار درخت سلسله مراتبی انجام می شود.
متدهای موجود در API Nests عبارتند از :

()d3.nest : این متد برای ایجاد یک Nest جدید استفاده می شود.

(nest.key (key : این متد برای راه اندازی یک تابع کلید جدید استفاده می شود. این تابع برای فراخوانی هر عنصر در یک آرایه ورودی و عناصر بازگشتی در گروه استفاده می شود.

(nest.sortKeys (comparator : این متد برای دسته بندی کلیدها در یک مقایسه کننده مشخص استفاده می شود.همچنین تابع به صورت d3.ascending یا d3.descending تعریف می شود.

(nest.sortValues (comparator : این متد برای مرتب کردن مقادیر در یک مقایسه کننده مشخص استفاده می شود. تابع مقایسه کننده عناصر leaf را مرتب می کند.

(nest.map (array : این متد برای اعمال آرایه مشخص شده و در بازگرداندن یک نقشه توزیع شده استفاده می شود.

هر ورودی در نقشه بازگشتی مربوط به یک مقدار کلیدی متمایز که توسط اولین تابع کلیدی باز گردانده می شود. مقدار ورود به تعداد اعمال کلید ثبت شده بستگی دارد.

(nest.object (array : این متد برای اعمال عملگر nest به آرایه مشخص شده و یک شیء تو در تو باز می گرداند.

(nest.entries (array : این متد برای اعمال عملگر nest به آرایه مشخص شده و آرایه ای از مقادیر کلیدی را باز می گرداند.

یک صفحه وب ساده nest.html را برای انجام متدهای nest بسازید.

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

مثال :

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

   <body>
      <h3>D3 Nest API</h3>
      <script>
         var data = [
            {
               "color" : "red",
               "key" : 1
            },
            {
               "color" : "green",
               "key" : 2
            },
            {
               "color" : "blue",
               "key" : 75
            }
         ]
         var nest =  d3.nest()
            .key(function (d) { return d.color; })
            .entries(data)console.log(nest);
         var filter = nest.filter(function (d) { return d.key = = = 'red' })
         console.log(filter);
      </script>
   </body>
</html>

<html>

<head>

</head>

<body>

var data = [

{

"color" : "red",

"key" : 1

{

"color" : "green",

"key" : 2

{

"color" : "blue",

"key" : 75

}

]

var nest = d3.nest()

.key(function (d) { return d.color; })

.entries(data)console.log(nest);

var filter = nest.filter(function (d) { return d.key = = = 'red' })

console.log(filter);

</script>

</body>

</html>

حالا نتیجه را در مرورگر بررسی و مشاهده کنید.

مثال :

Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]

Array[1]
0: Object
length: 1
__proto__: Array[0]

Array[3]

0: Object

1: Object

2: Object

length: 3

__proto__: Array[0]

Array[1]

0: Object

length: 1

__proto__: Array[0]

کلام آخر

D3.js امکان کنترل بیشتری بر نتیجه نهایی بصری را فراهم می کند و امروزه این فناوری داغ ترین و قدرتمندترین فناوری مصورسازی داده مبتنی بر وب است. با ما همراه باشید تا در جلسه بعد آموزش انتخاب API در D3.js را فرا بگیرید.

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

API اشیاء در D3.js ,API در D3.js ,API نقشه ها در D3.js ,مجموعه های API در D3.js

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

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

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

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

جلسه ۱۴ : مجموعه های API در D3.js

مقدمه

مجموعه های API در D3.js

API اشیاء در D3.js

API نقشه ها در D3.js

مجموعه API

API Nests

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ