با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، اگر به خاطر داشته باشید در جلسه پیش در مورد مجموعه های API در D3.js گفتگو شد. در این جلسه از آموزش های دوره D3.js به انتخاب API در D3.js می پردازیم. انتخاب ها، تغیرات داده های قدرتمند از مدل شیء سند (DOM) هستند. این مورد برای تعیین ویژگی ها، سبک ها، خواص، HTML و متن و بسیاری از موارد دیگر استفاده می شود. در این فصل جزئیات انتخاب API و پیکربندی API در D3.js را توضیح خواهیم داد.
شما می توانید مستقیما با استفاده از اسکریپت زیر API را پیکربندی کنید.
1 2 3 4 | <script src = "https://d3js.org/d3-selection.v1.min.js"></script> <script> </script> |
در زیر مهمترین متد های انتخاب API ذکر شده است :
()d3.selection
(d3.select(selector
(d3.selectAll(selecto
(selection.selectAll(selector
(selection.filter(filter
(selection.merge(other
(d3.matcher(selector
(d3.creator(name
(selection.each(function
([selection.call(function[, argument
()d3.local
(local.set(node, value
(local.get(node
(local.remove(node
اکنون هر یک از این متدها را با جزئیات به تفصیل بررسی کنیم.
این متد برای انتخاب عنصر ریشه (root) استفاده می شود. این تابع همچنین می تواند برای تست انتخاب یا گسترش انتخاب d3js استفاده شود.
این متد برای انتخاب اولین عنصری که با رشته انتخاب شده مشخص شده است استفاده می شود.
مثال : اجازه دهید مثال زیر را در نظر بگیریم.
1 | var body = d3.select("body"); |
اگر انتخابگر یک رشته نباشد، گره مشخص را که در زیر تعریف شده انتخاب می کند.
1 | d3.select("p").style("color", "red"); |
این متد تمام عناصری را که با رشته انتخاب شده مشخص شده انتخاب می کند.
مثال زیر را در نظر بگیرید.
1 | var body = d3.selectAll("body"); |
اگر انتخابگر یک رشته نباشد، آرایه ای از گره های مشخص شده را انتخاب می کند، که در زیر تعریف شده است.
1 | d3.selectAll("body").style("color", "red"); |
این متد برای انتخاب یک عنصر استفاده می شود. همچنین عناصر قبلی را انتخاب می کند که با رشته انتخاب شده مطابقت دارند. عناصر در انتخاب بازگشت داده شده با گره متناظر آنها در این انتخاب گروه بندی می شوند. اگر هیچ یک از عناصر انتخابگر مشخص شده با عنصر فعلی مطابقت نداشته باشد، یا اگر انتخابگر صفر باشد، گروهی در شاخص فعلی خالی خواهند بود.
مثال زیر را در نظر بگیرید.
1 | var b = d3.selectAll("p").selectAll("b"); |
این متد برای فیلتر کردن انتخاب استفاده می شود، یک انتخاب جدید که شامل تنها عناصری است که فیلتر مشخص شده آنها درست است را باز می گرداند.
مثال زیر را در نظر بگیرید.
1 | var even = d3.selectAll("tr").filter(":nth-child(odd)"); |
در اینجا، فیلتر انتخاب یک ردیف جدول فقط عدد فرد را نشان می دهد.
این متد برای بازگرداندن یک انتخاب جدید که با انتخاب دیگری مشخص شده استفاده می شود.
به مثال زیر توجه نمایید.
1 2 | var rect = svg.selectAll("rect").data(data); rect.enter().append("rect").merge(rect); |
این متد برای اختصاص انتخابگر مشخص استفاده می شود. همچنین تابع باز گردانده می شود، که مقدار درست را برگرداند.
مثال
1 | var p = selection.filter(d3.matcher("p")); |
این متد برای اختصاص نام عنصر مشخص شده استفاده می شود. تابعی باز گردانده می شود که یک عنصر از نام داده شده را می سازد، فرض می شود که این عنصر اصلی (parent)است.
مثال زیر را در نظر بگیرید.
1 | selection.append(d3.creator("p")); |
این متد برای فراخوانی تابع مشخص شده برای هر عنصر انتخاب شده استفاده می شود، به ترتیب توسط datum فعلی (d)، شاخص فعلی (i) و گروه فعلی (گره ها) به عنوان عنصر فعلی DOM (گره ها [i ]) فرستاده می شود.
همانطور که در زیر توضیح داده شده است.
1 2 3 4 5 | parent.each(function(p, j) { d3.select(this) .selectAll(".child") .text(function(d, i) { return "child " + d.name + " of " + p.name; }); }); |
این متد برای اینکه به طور دقیق یکبار تابع مشخص شده را فراخوانی کند استفاده می شود. سینتکس آن در زیر نشان داده شده است.
1 2 3 | function name(selection, first, last) { selection.attr("first-name", first).attr("last-name", last); } |
این متد را می توان به صورت زیر نیز نشان داد.
1 | d3.selectAll("p").call(name, "Adam", "David"); |
d3 به صورت محلی اجازه می دهد تا شما وضعیت محلی که مستقل از داده است را تعریف کنید.
مثال زیر را در نظر بگیرید.
1 | var data = d3.local(); |
بر خلاف var، مقدار هر محل نیز توسط DOM محدود می شود.
این متد مقدار محلی را بر روی گره مشخص شده با مقدار تعیین می کند.
مثال
1 2 3 | selection.each(function(d) { data.set(this, d.value); }); local.get(node) |
این متد مقدار محلی را بر روی گره مشخص می کند باز می گرداند. اگر گره محلی را تعریف نکنید، آن مقدار را از نزدیکترین گره که آن را تعریف می کند، باز می گرداند.
این متد مقدار محلی را از گره مشخص شده حذف می کند. اگر گره تعریف شده باشد، مقدار درست را بر میگرداند، در غیر این صورت نادرست باز گردانده می شود.
آموزش انتخاب API در D3.js و پیکربندی API در D3.js همراه با متدهای پرکاربرد در این زمینه معرفی شدند. امیدوارم از مطالب ذکر شده بهره کافی را برده باشید با ما همراه باشید تا در جلسه بعد مسیرهای API در D3.js را فرا بگیرید.