d3 component
New i argument
D3.JSの軽量コンポーネント抽象化
特徴：
destroy 。例：
投稿| ES6バージョン | スピナー| ES6バージョン | STOPWATCH（Redux）| ES6バージョン |
カウンター（redux）| ES6バージョン | トドス | メニュー（redux）でプロットを散布する ES6バージョン|半径選択バリアント |
クロック | 空港時計 | example-viewer（redux、es6） |
フラクタルパイチャート（ES6） |
このコンポーネントの抽象化を使用すると、データ駆動型のユーザーインターフェイスコンポーネントを概念的な「ボックスウィチンボックス」として簡単にカプセル化でき、DOMツリーのさまざまなレベルの懸念をきれいに分離できます。このコンポーネントの抽象化は、概念と機能が類似しており、無国籍の機能コンポーネントを反応します。コンポーネントがそれ自体をレンダリングし、アプリケーション状態と対話するために必要なすべてが、レンダリング時にコンポーネントツリーを通過します。コンポーネントは地元の状態を保存しません。これは、D3成分と再利用可能なチャートパターンの主な違いです。意図された使用はReduxのような単方向データフローアーキテクチャ内にあるため、イベントやイベント委任に特別な治療は行われません。
NPMを使用する場合、 npm install d3-component 。それ以外の場合は、最新リリースをダウンロードしてください。また、unpkg.comからスタンドアロンライブラリとして直接読み込むこともできます。 AMD、CommonJS、および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は次のようになります。
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 ]））
指定されたTagnameのDOM要素を管理およびレンダリングする新しいコンポーネントジェネレーターを作成します。
オプションのパラメータークラス名は、管理されたDOM要素のclass属性の値を決定します。
＃成分。 create （ function（selection、d、i） ）
このコンポーネントジェネレーターの作成関数を設定します。これは、新しいコンポーネントインスタンスが作成されるたびに呼び出され、現在のDOM要素、現在のデータム（ d ）、および現在のデータム（ I ）のインデックスを含む選択に渡されます。
＃成分。 render （ function（selection、d、i） ）
このコンポーネントジェネレーターのレンダリング関数を設定します。この関数は、レンダリング中に各コンポーネントインスタンスに対して呼び出され、現在のDOM要素、現在のデータム（ d ）、および現在のデータム（ I ）のインデックスを含む選択に渡されます。
＃成分。破壊（ function（selection、d、i） ）
このコンポーネントジェネレーターの破壊関数を設定します。これは、コンポーネントインスタンスが破壊されるたびに呼び出され、現在のDOM要素、現在のデータム（ d ）、および現在のデータム（ I ）のインデックスを含む選択に渡されます。
コンポーネントインスタンスが破壊されると、すべての子供の破壊機能も（再帰的に）呼び出されるため、CompoentインスタンスがDOMから削除される前に、この関数が呼び出されることを確認できます。
破壊関数はオプションで遷移を返す場合があります。これにより、遷移が終了するまでDOM要素の除去が延期されます（ただし、親コンポーネントインスタンスが破壊されない場合のみ）。深くネストされたコンポーネントインスタンスでは、遷移が完了する前にDOMノードが削除される可能性があるため、遷移が完了した後に存在するDOMノードに依存しないことが最善です。
＃成分。キー（関数）
コンポーネントインスタンスのDOM要素を管理するときに、内部データで使用される重要な関数を設定します。キー関数の指定はオプションです（アレイインデックスはデフォルトでキーとして使用されます）が、データ配列が時間の経過とともに再注文またはスプライスされる場合には、再レンダリングがより効率的になります。
＃component （ selection [、 data [、 context ]]）
特定の選択にコンポーネントをレンダリングします。これは、単一のDOM要素を含むD3選択です。生のDOM要素は、選択引数として渡される場合があります。コンポーネントインスタンスのマージされたENTERおよび更新選択を含むD3選択を返します。
[]として指定されている場合、以前にレンダリングされたすべてのコンポーネントインスタンスが削除されます。undefinedになります。要約すると、次の署名を使用してコンポーネントをレンダリングできます。
selection.call(myComponent, dataObject) →1つのインスタンス、レンダリング関数DはdataObjectになります。selection.call(myComponent, dataArray) → dataArray.lengthインスタンス、レンダリング関数DはdataArray[i]になりますselection.call(myComponent) →1つのインスタンス、レンダリング関数Dはundefinedなります。コンテキストオブジェクトが指定されている場合、データ配列内の各データ要素は、プロトタイプがコンテキストオブジェクトである新しいオブジェクトに浅くマージされ、結果の配列はデータアレイの代わりに使用されます。これは、コンポーネントツリーにコールバック関数を渡すのに役立ちます。明確にするために、次の2つの呼び出しは同等です。
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 ) ;
