d3 component

D3 المكون

تجريد مكون خفيف الوزن لـ D3.JS.

سمات:

• يغلف نمط التحديث العام.
• مكونات قابلة للتكوين (حتى متكررة!) مكونات وظيفية عديمة الجنسية.
• destroy موثوقة هوك لتنظيف الأشياء.
• يعمل بشكل رائع مع Redux.

أمثلة:

الوظائف | إصدار ES6	سبينر | إصدار ES6	ساعة توقيت (Redux) | إصدار ES6
العداد (Redux) | إصدار ES6	تودوس	مؤامرة مبعثرة مع القوائم (Redux) إصدار ES6 | دائرة نصف قطرها اختيار البديل
ساعة	ساعات المطار	مثال على ذلك (Redux ، ES6)
مخطط فطيرة كسري (ES6)

باستخدام تجريد المكون هذا ، يمكنك بسهولة تغليف مكونات واجهة المستخدم التي تعتمد على البيانات باعتبارها "مربعات-مع صناديق" ، معزولة بشكل نظيف لمستويات مختلفة من شجرة DOM الخاصة بك. يتشابه تجريد المكون في المفهوم والوظائف للرد على المكونات الوظيفية عديمة الأساس. كل شيء يحتاج المكون إلى تقديم نفسه والتفاعل مع حالة التطبيق يتم تمريره عبر شجرة المكون في وقت العرض. المكونات لا تخزن أي ولاية محلية ؛ هذا هو الفرق الرئيسي بين المكون D3 ونمط المخططات القابلة لإعادة الاستخدام. لا يتم تقديم معاملة خاصة للأحداث أو تفويض الأحداث ، لأن الاستخدام المقصود هو ضمن بنية تدفق البيانات أحادية الاتجاه مثل Redux.

التثبيت

إذا كنت تستخدم NPM ، npm install d3-component . خلاف ذلك ، قم بتنزيل أحدث إصدار. يمكنك أيضًا التحميل مباشرة من unpkg.com كمكتبة مستقلة. يتم دعم بيئات AMD و CommonJs و Vanilla. في الفانيليا ، يتم تصدير d3 Global:

 < script src =" https://unpkg.com/d3@4 " > </ script >
< script src =" https://unpkg.com/d3-component@3 " > </ script >
< script >
  var myComponent = d3 . component ( "div" ) ;
</ script > 

مرجع API

ملحوظة: كان هناك إصدار إصدار رئيسي حديث ، وكان هناك تغييرات كبيرة في واجهة برمجة التطبيقات.

باختصار ، تبدو واجهة برمجة التطبيقات هكذا:

 var myComponent = d3 . component ( "div" , "some-class" )
  . create ( ( selection , d , i ) => { ... } ) // Invoked for entering component instances.
  . render ( ( selection , d , i ) => { ... } ) // Invoked for entering AND updating component instances.
  . destroy ( ( selection , d , i ) => { ... } ) ; // Invoked for exiting instances, may return a transition.

// To invoke the component,
d3 . select ( "body" ) // create a selection with a single element,
  . call ( myComponent , "Hello d3-component!" ) ; // then use selection.call().

لمشاهدة واجهة برمجة التطبيقات الكاملة في العمل ، تحقق من مثال "Hello D3 المكون" هذا.

# المكون ( tagname [، className ]))

ينشئ مولد مكون جديد يدير ويجعل عناصر DOM من tagName المحدد.

يحدد اسم ClassName الاختياري قيمة سمة class على عناصر DOM التي تمت إدارتها.

# عنصر . إنشاء ( وظيفة (اختيار ، د ، ط) )

يعين وظيفة إنشاء هذا المولد المكون هذا ، والذي سيتم استدعاؤه كلما تم إنشاء مثيل مكون جديد ، يتم تمرير تحديد يحتوي على عنصر DOM الحالي ، و DATUM الحالي ( D ) ، وفهرس المسند الحالي ( I ).

# عنصر . عرض ( وظيفة (اختيار ، د ، ط) )

يضبط وظيفة تقديم هذا المولد المكون. سيتم استدعاء هذه الوظيفة لكل مثيل مكون أثناء التقديم ، حيث يتم تمرير اختيار يحتوي على عنصر DOM الحالي ، و DATUM الحالي ( D ) ، وفهرس المسند الحالي ( I ).

# عنصر . تدمير ( وظيفة (الاختيار ، د ، ط) )

يعين وظيفة تدمير هذا المولد المكون ، والذي سيتم استدعاؤه كلما تم تدمير مثيل مكون ، يتم تمرير اختيار يحتوي على عنصر DOM الحالي ، و DACTRUM الحالي ( D ) ، وفهرس المسند الحالي ( I ).

عندما يتم تدمير مثيل مكون ، يتم استدعاء وظيفة التدمير لجميع أطفالها أيضًا (بشكل متكرر) ، بحيث يمكنك التأكد من استدعاء هذه الوظيفة قبل إزالة المثيل المركب من DOM.

قد تُرجع وظيفة التدمير اختياريًا إلى عملية انتقال ، والتي ستؤجل إزالة عنصر DOM حتى بعد الانتهاء من الانتقال (ولكن فقط إذا لم يتم تدمير مثيل المكون الأصل). قد تكون مثيلات المكونات المتداخلة بعمق قد تمت إزالة عقد DOM الخاصة بها قبل الانتهاء من الانتقال ، لذلك من الأفضل عدم الاعتماد على عقدة DOM الموجودة بعد اكتمال الانتقال.

# عنصر . المفتاح ( وظيفة )

يعين الوظيفة الرئيسية المستخدمة في انضمام البيانات الداخلية عند إدارة عناصر DOM لمضيفين مكون. يعد تحديد وظيفة المفتاح اختياريًا (يتم استخدام فهرس المصفوفة كمفتاح افتراضيًا) ، ولكنه سيجعل إعادة تقديم أكثر كفاءة في الحالات التي يتم فيها إعادة ترتيب صفائف البيانات أو ترتيبها بمرور الوقت.

# المكون ( اختيار [، البيانات [، السياق ]]))

يعرض المكون إلى التحديد المحدد ، وهو اختيار D3 يحتوي على عنصر DOM واحد. يمكن أيضًا تمرير عنصر DOM الخام كوسيطة اختيار . إرجاع اختيار D3 الذي يحتوي على اختيارات مدخل وتحديث تم دمجها لحالات المكون.

• إذا تم تحديد البيانات وكانت صفيفًا ، فسيتم تقديم مثيل مكون واحد لكل عنصر من عناصر الصفيف ، وستتلقى وظيفة العرض عنصرًا واحدًا من صفيف البيانات كوسيطة D.
  • حالة مفيدة: إذا تم تحديد البيانات كصفيف فارغ [] ، فسيتم إزالة جميع مثيلات المكونات التي تم تقديمها مسبقًا.
• إذا تم تحديد البيانات ولم تكن صفيفًا ، فسيتم تقديم مثيل مكون واحد بالضبط ، وستتلقى وظيفة العرض قيمة البيانات كوسيطة D.
• إذا لم يتم تحديد البيانات ، فسيتم تقديم مثيل مكون واحد بالضبط ، وستتلقى وظيفة العرض undefined كوسيطة D.

باختصار ، يمكن تقديم المكونات باستخدام التواقيع التالية:

• selection.call(myComponent, dataObject) → مثيل واحد ، سيكون تقديم دالة D dataObject .
• selection.call(myComponent, dataArray) → dataArray.length مثيلات ، فإن الوظيفة D ستكون dataArray[i]
• selection.call(myComponent) → مثيل واحد ، لن يتم undefined وظيفة العرض D.

إذا تم تحديد كائن سياق ، فسيتم دمج كل عنصر بيانات في صفيف البيانات في كائن جديد هو النموذج الأولي هو كائن السياق ، وسيتم استخدام الصفيف الناتج بدلاً من صفيف البيانات . هذا مفيد لتمرير وظائف رد الاتصال من خلال شجرة المكون. للتوضيح ، فإن الدعتين التاليتين متكافئتين:

 var context = {
  onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray . map ( function ( d ) {
  return Object . assign ( Object . create ( context ) , d ) ;
} ) ) ; 

 var context = {
  onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray , context ) ;