d3 component

D3組件

D3.js的輕量級分量抽象

特徵：

• 封裝常規更新模式。
• 可複合（甚至遞歸！）無狀態功能組件。
• 可靠的destroy掛鉤以清理東西。
• 與Redux一起工作。

示例：

帖子| ES6版本	旋轉器| ES6版本	秒錶（redux）| ES6版本
計數器（redux）| ES6版本	戒酒	用菜單（Redux）散射情節 ES6版本|半徑選擇變體
鐘	機場時鐘	示例視圖（Redux，ES6）
分形餅圖（ES6）

使用此組件抽象，您可以輕鬆地將數據驅動的用戶界面組件作為概念性的“盒子中的框”封裝，從而清楚地隔離了對DOM樹各個級別的關注點。該組件抽像在概念和功能上與反應無狀態功能組件相似。組件需要在渲染時間通過組件樹傳遞並與應用程序狀態進行交互所需的一切。組件不存儲任何局部狀態；這是D3組分與TOS可重複使用的圖表模式之間的主要區別。沒有對事件或事件代表團的特殊待遇，因為預期用途在Redux等單向數據流架構中。

安裝

如果使用NPM， npm install d3-component 。否則，下載最新版本。您也可以直接從UNPKG.com作為獨立庫中加載。支持AMD，COM​​​​PORJS和VANILLA環境。在香草中， d3全球出口：

 < 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元素中。

可選參數類名稱確定在管理的DOM元素上的class屬性值。

＃成分。創建（函數（選擇，d，i） ）

設置此組件生成器的創建函數，每當創建一個新的組件實例，傳遞一個包含當前DOM元素，當前基準（ D ）和當前基準（ i ）的索引的選擇時，都會調用該功能。

＃成分。渲染（函數（選擇，D，i） ）

設置此組件生成器的渲染函數。在渲染過程中，每個組件實例都將調用此功能，並通過一個包含當前DOM元素，當前基準（ D ）和當前基準（ i ）的索引的選擇。

＃成分。銷毀（功能（選擇，d，i） ）

設置該組件生成器的銷毀功能，每當組件實例被破壞時，都會調用該功能，並通過包含當前DOM元素的選擇，當前基準（ D ）和當前基準的索引（ i ）。

當組件實例被破壞時，也會調用其所有子女的銷毀功能（遞歸），因此您可以確保在從DOM中刪除該功能之前將調用此功能。

銷毀功能可以選擇返回過渡，該過渡將推遲DOM元素的去除，直到過渡完成後（但前提是當父組件實例未破壞時）。在過渡完成之前，深層嵌套的組件實例可能會刪除其DOM節點，因此最好不要依賴過渡完成後存在的DOM節點。

＃成分。鍵（功能）

在管理組件實例的DOM元素時，設置內部數據中使用的密鑰函數。指定關鍵功能是可選的（默認情況下，數組索引用作密鑰），但在隨著時間的推移將數據陣列重新排序或剪接的情況下，將使重新渲染效率更高。

＃component （選擇[，數據[，上下文]]）

將組件渲染為給定選擇，即包含單個DOM元素的D3選擇。原始DOM元素也可以作為選擇參數傳遞。返回包含組件實例的合併Enter和更新選擇的D3選擇。

• 如果指定數據並且是一個數組，則將為數組的每個元素渲染一個組件實例，並且渲染函數將接收數據數組的單個元素作為D參數。
  • 有用的情況：如果將數據指定為空數組[] ，則將刪除所有先前渲染的組件實例。
• 如果指定數據並且不是數組，則將渲染一個組件實例，並且渲染函數將接收數據值作為D參數。
• 如果未指定數據，則將渲染一個組件實例，並且渲染函數將接收到undefined為d參數。

總而言之，可以使用以下簽名渲染組件：

• selection.call(myComponent, dataObject) →一個實例，渲染函數d將是dataObject 。
• selection.call(myComponent, dataArray) → dataArray.length實例，渲染函數d將是dataArray[i]
• selection.call(myComponent) →一個實例，渲染函數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 ) ;