كيفية الوصول إلى فهرس بيانات الفئة الأم في d3.js v4

في d3.js v4، تم استبدال الوسيطة j بقائمة العناصر NodeList التابعة للاختيار (selection)، مما يعني أنه يمكن الوصول إلى فهرس بيانات الفئة الأصلية عن طريق تحويل NodeList إلى مصفوفة واستخدام indexOf للعثور على فهرس العنصر الحالي. اليك كيفية تحقيق ذلك:

javascriptCopy code
td.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.

في 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.

باختصار، يمكنك القيام بذلك كما هو موضح في الكود السابق.