كيفية الوصول إلى فهرس بيانات الفئة الأم في d3.js v4
في d3.js v4، تم استبدال الوسيطة j
بقائمة العناصر NodeList التابعة للاختيار (selection)، مما يعني أنه يمكن الوصول إلى فهرس بيانات الفئة الأصلية عن طريق تحويل NodeList إلى مصفوفة واستخدام indexOf
للعثور على فهرس العنصر الحالي. اليك كيفية تحقيق ذلك:
javascripttd.text(function(d, i) {
var parentData = d3.select(this.parentNode).datum(); // بيانات الفئة الأم
var parentIndex = d3.select(this.parentNode.parentNode).selectAll("tr").nodes().indexOf(this.parentNode); // فهرس الفئة الأم
return "Row: " + parentIndex;
});
يتم استخدام select(this.parentNode).datum()
للوصول إلى بيانات الفئة الأم، واستخدام selectAll("tr").nodes().indexOf(this.parentNode)
للعثور على فهرس الفئة الأم بالنسبة لقائمة العناصر NodeList.
-
تحسين أداء تحليل JSON04/03/2024
-
فهرس العمود: المزايا والعيوب04/04/2024
-
قراءة ملفات CSV باستخدام Akka Streams13/04/2024
-
من الصفر إلى مدير المنتج07/11/2023
المزيد من المعلومات
في d3.js v4، تم تغيير طريقة الوصول إلى فهرس بيانات الفئة الأم في النسخ السابقة. في الإصدارات الأقدم من d3.js (مثل v3)، كان بإمكانك استخدام الوسيطة j
في الدالة التابعة لـ text()
للوصول إلى فهرس بيانات الفئة الأم بينما كانت تقوم بتعيين نص العنصر.
ومع ذلك، في d3.js v4، تم تغيير هذه الطريقة بحيث يتم الوصول إلى بيانات الفئة الأم مباشرةً باستخدام select(this.parentNode).datum()
، حيث this.parentNode
يمثل عنصر الفئة الأم الحالي. بعد الحصول على بيانات الفئة الأم، يمكنك استخدامها كما تريد في دالة text()
.
للحصول على فهرس الفئة الأم، يجب أولاً الوصول إلى عنصر tr
الذي يحتوي على العنصر الحالي، ثم استخدام selectAll("tr").nodes()
للحصول على NodeList لجميع عناصر tr
، وباستخدام indexOf(this.parentNode)
يمكنك العثور على فهرس العنصر الحالي ضمن NodeList.
باختصار، يمكنك القيام بذلك كما هو موضح في الكود السابق.