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