d3 component

องค์ประกอบ D3

ส่วนประกอบที่มีน้ำหนักเบาเป็นนามธรรมสำหรับ D3.JS.

คุณสมบัติ:

• ห่อหุ้มรูปแบบการอัปเดตทั่วไป
• Composable (แม้แต่ซ้ำ!) ส่วนประกอบการทำงานไร้สัญชาติ
• เบ็ด destroy ที่เชื่อถือได้สำหรับการทำความสะอาดสิ่งต่างๆ
• ใช้งานได้ดีกับ Redux

ตัวอย่าง:

โพสต์ | เวอร์ชัน ES6	สปินเนอร์ เวอร์ชัน ES6	นาฬิกาจับเวลา (redux) | เวอร์ชัน ES6
เคาน์เตอร์ (redux) | เวอร์ชัน ES6	โทดอส	พล็อตกระจายด้วยเมนู (redux) ES6 เวอร์ชัน | RADIUS SELECT VARIANT
นาฬิกา	นาฬิกาสนามบิน	Example-Viewer (Redux, ES6)
แผนภูมิพายเศษส่วน (ES6)

การใช้ส่วนประกอบที่เป็นนามธรรมนี้คุณสามารถห่อหุ้มส่วนประกอบอินเทอร์เฟซผู้ใช้ที่ขับเคลื่อนด้วยข้อมูลได้อย่างง่ายดายเป็นแนวคิด "Boxes-Within-Boxes" แนวคิดแยกข้อกังวลอย่างหมดจดสำหรับระดับ DOM ของคุณในระดับต่างๆ ส่วนประกอบที่เป็นนามธรรมนี้มีความคล้ายคลึงกันในแนวคิดและการทำงานเพื่อตอบสนองส่วนประกอบการทำงานไร้สัญชาติ ทุกสิ่งที่ส่วนประกอบจำเป็นต้องแสดงตัวเองและโต้ตอบกับสถานะแอปพลิเคชันจะถูกส่งผ่านผ่านแผนผังส่วนประกอบในเวลาที่แสดงผล ส่วนประกอบไม่เก็บสถานะท้องถิ่นใด ๆ นี่คือความแตกต่างที่สำคัญระหว่างองค์ประกอบ D3 และรูปแบบแผนภูมิที่นำกลับมาใช้ใหม่ได้ ไม่มีการรักษาพิเศษให้กับเหตุการณ์หรือการมอบหมายงานเนื่องจากการใช้งานที่ตั้งใจไว้นั้นอยู่ในสถาปัตยกรรมการไหลของข้อมูลทิศทางเดียวเช่น Redux

การติดตั้ง

หากคุณใช้ NPM, npm install d3-component มิฉะนั้นดาวน์โหลดรุ่นล่าสุด นอกจากนี้คุณยังสามารถโหลดโดยตรงจาก UNPKG.com เป็นห้องสมุดแบบสแตนด์อโลน รองรับสภาพแวดล้อม AMD, CommonJS และวานิลลา ในวานิลลามีการส่งออก 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

หมายเหตุ: มีการเปิดตัวรุ่นใหญ่ล่าสุดและพร้อมกับการเปลี่ยนแปลง API ที่สำคัญ

โดยสรุป 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().

หากต้องการดู API แบบเต็มรูปแบบให้ตรวจสอบตัวอย่าง "Hello D3-Component" นี้

# component ( tagname [, classname ]))))

สร้างตัวสร้างองค์ประกอบใหม่ที่จัดการและแสดงผลเป็นองค์ประกอบ DOM ของ แท็กชื่อ ที่ระบุ

ชื่อ พารามิเตอร์ทางเลือกจะกำหนดค่าของแอตทริบิวต์ class บนองค์ประกอบ DOM ที่มีการจัดการ

# ส่วนประกอบ . สร้าง ( ฟังก์ชั่น (การเลือก, d, i) )

ตั้งค่า ฟังก์ชั่น สร้างของตัวสร้างส่วนประกอบนี้ซึ่งจะถูกเรียกใช้เมื่อใดก็ตามที่มีการสร้างอินสแตนซ์ส่วนประกอบใหม่โดยผ่าน การเลือก ที่มีองค์ประกอบ DOM ปัจจุบัน Datum ปัจจุบัน ( D ) และดัชนีของข้อมูลปัจจุบัน ( I )

# ส่วนประกอบ . render ( ฟังก์ชั่น (การเลือก, d, i) )

ตั้งค่า ฟังก์ ชั่นเรนเดอร์ของตัวสร้างส่วนประกอบนี้ ฟังก์ชั่น นี้จะถูกเรียกใช้สำหรับแต่ละอินสแตนซ์ส่วนประกอบระหว่างการเรนเดอร์จะถูกส่งผ่าน การเลือก ที่มีองค์ประกอบ DOM ปัจจุบัน DATUM ปัจจุบัน ( D ) และดัชนีของข้อมูลปัจจุบัน ( I )

# ส่วนประกอบ . ทำลาย ( ฟังก์ชั่น (การเลือก, d, i) )

ตั้งค่า ฟังก์ชั่น การทำลายของเครื่องกำเนิดส่วนประกอบนี้ซึ่งจะถูกเรียกใช้เมื่อใดก็ตามที่อินสแตนซ์ส่วนประกอบถูกทำลายจะถูกส่งผ่าน การเลือก ที่มีองค์ประกอบ DOM ปัจจุบันข้อมูลปัจจุบัน ( D ) และดัชนีของข้อมูลปัจจุบัน ( I )

เมื่ออินสแตนซ์ส่วนประกอบถูกทำลาย ฟังก์ชั่น การทำลายของเด็กทั้งหมดจะถูกเรียกใช้ (ซ้ำ) ดังนั้นคุณสามารถมั่นใจได้ว่า ฟังก์ชัน นี้จะถูกเรียกใช้ก่อนที่อินสแตนซ์ compoent จะถูกลบออกจาก DOM

ฟังก์ชั่น การทำลายอาจเลือกส่งคืนการเปลี่ยนแปลงซึ่งจะเลื่อนการกำจัดองค์ประกอบ DOM จนกระทั่งหลังจากการเปลี่ยนแปลงเสร็จสิ้น (แต่เฉพาะในกรณีที่อินสแตนซ์องค์ประกอบหลักไม่ได้ถูกทำลาย) อินสแตนซ์องค์ประกอบที่ซ้อนกันอย่างลึกซึ้งอาจมีการลบโหนด DOM ของพวกเขาก่อนที่การเปลี่ยนจะเสร็จสิ้นดังนั้นจึงเป็นการดีที่สุดที่จะไม่ขึ้นอยู่กับโหนด DOM ที่มีอยู่หลังจากการเปลี่ยนผ่านเสร็จสิ้น

# ส่วนประกอบ . คีย์ ( ฟังก์ชั่น )

ตั้งค่า ฟังก์ชัน คีย์ที่ใช้ในการเข้าร่วมข้อมูลภายในเมื่อจัดการองค์ประกอบ DOM สำหรับอินสแตนซ์ส่วนประกอบ การระบุ ฟังก์ชั่น คีย์เป็นทางเลือก (ดัชนีอาร์เรย์ถูกใช้เป็นคีย์โดยค่าเริ่มต้น) แต่จะทำให้การแสดงซ้ำมีประสิทธิภาพมากขึ้นในกรณีที่อาร์เรย์ ข้อมูล ได้รับการจัดลำดับใหม่หรือ spliced ​​เมื่อเวลาผ่านไป

# Component ( การเลือก [, data [, context ]])

แสดงผลส่วนประกอบไปยัง การเลือก ที่กำหนดการเลือก D3 ที่มีองค์ประกอบ DOM เดียว องค์ประกอบ DOM ดิบอาจถูกส่งผ่านเป็นอาร์กิวเมนต์ การเลือก ส่งคืนการเลือก D3 ที่มีการเลือก Enter Enter และ Update สำหรับอินสแตนซ์ส่วนประกอบ

• หากมีการระบุ ข้อมูล และเป็นอาร์เรย์หนึ่งอินสแตนซ์ส่วนประกอบจะถูกแสดงผลสำหรับแต่ละองค์ประกอบของอาร์เรย์และ ฟังก์ชั่นเรนเดอร์ จะได้รับองค์ประกอบเดียวของอาร์เรย์ ข้อมูล เป็นอาร์กิวเมนต์ D
  • กรณีที่มีประโยชน์: หากมีการระบุ ข้อมูล เป็นอาร์เรย์ที่ว่างเปล่า [] อินสแตนซ์ส่วนประกอบที่แสดงผลก่อนหน้านี้ทั้งหมดจะถูกลบออก
• หากมีการระบุ ข้อมูล และไม่ใช่อาร์เรย์จะมีการแสดงอินสแตนซ์ส่วนประกอบหนึ่งอย่างแน่นอนและ ฟังก์ชั่นเรนเดอร์ จะได้รับค่า ข้อมูล เป็นอาร์กิวเมนต์ D
• หากไม่ได้ระบุ ข้อมูล อินสแตนซ์ส่วนประกอบหนึ่งจะถูกแสดงผลและ ฟังก์ชั่นการแสดงผล จะได้รับ undefined เป็นอาร์กิวเมนต์ D

โดยสรุปส่วนประกอบสามารถแสดงผลได้โดยใช้ลายเซ็นต่อไปนี้:

• selection.call(myComponent, dataObject) →หนึ่งอินสแตนซ์ render function d จะเป็น dataObject
• selection.call(myComponent, dataArray) → dataArray.length อินสแตนซ์การแสดงฟังก์ชั่น D จะเป็น dataArray[i]
• selection.call(myComponent) →หนึ่งอินสแตนซ์ render function d จะ undefined

หากมีการระบุวัตถุ บริบท องค์ประกอบข้อมูลแต่ละรายการในอาร์เรย์ข้อมูลจะถูกรวมเข้ากับวัตถุใหม่ที่มีต้นแบบเป็นวัตถุ บริบท และอาร์เรย์ที่ได้จะถูกนำมาใช้แทนอาร์เรย์ ข้อมูล สิ่งนี้มีประโยชน์สำหรับการส่งฟังก์ชั่นการโทรกลับผ่านแผนผังส่วนประกอบของคุณ เพื่อชี้แจงการเรียกร้องสองครั้งต่อไปนี้เทียบเท่า:

 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 ) ;