入門チュートリアルのD3.js v5のバージョン（第10章）

この章では、面白いことをやっている - 私たちは最後の章のドロー動きをグラフ化しましょう、それが面白いではないでしょう

チャートを上に移動するために、我々は次の新しい知識を必要とします

.ATTR（XXX）.transition（）.ATTR （XXX）、遷移が（）プロパティに、すなわち前転移性後に遷移、追加表し
.duration（2000）、2秒の遷移時間を表し
、.delay（500）後0.4秒の遷移遅延表し
.ease（d3.easeElasticInOut）は遷移モードを表し、こことv3のバージョンの違いに注意してください
あなたは上記の基本を持っていたら、私たちはダイナミックなチャートを達成するためになりました

図1に示すように、矩形にトランジション効果を追加

gs.append（ "RECT" ）
.ATTR（ "X"、関数（D、I）{
 戻り xScaleは（I）rectPadding + / 2;
 }）     
.ATTR（ "Y"、関数（D）{ // これはすなわち、初期状態、変更する
VARの分= yScale.domain（）[0 ];
 戻り YSCALE（分）; //は、最大リターンがある、知ることができる
}）
.ATTR（ "幅"、関数（）{
 戻る - xScale.step（）; rectPadding 
}）
.ATTR（ "高さ"、機能（D）{ // ここでは変更、すなわち、初期状態
復帰 0 ; 
}）
（.ATTRを、 "青"、 "塗りつぶし" ）
.transition（）// 遷移添加 
.duration（2000）// 持続 
.delay（関数（D、I）{ // 遅延
リターン私は400 *を; 
）} 
// .ease（読者が効果確認するために、自分のコメントを削除することができますd3.easeElasticInOut）//（Chromeブラウザが文句を言うだろうが、結果には影響しません） 
.ATTR（「y軸」、機能の（d）{ // 最終ステータスに戻る
戻る（YSCALEをD）; 
}）
.ATTR（ "高さ"、機能（D）{ // 最終状態への復帰
戻り高さmarge.top-marge.bottom- YSCALE（D）; 
}）

コード説明：

注 - 上記のコメントへの

2、テキストにトランジションエフェクトを追加します

gs.append（ "テキスト" ）
.ATTR（ "X"、関数（D、i）は{
 戻り、xScaleは（I）+ rectPadding / 2
 }）
.ATTR（ "y"は、機能（D）{
 VAR =分YSCALEを.domainを（）[0 ];
 戻りYSCALE（分）; 
}）
.ATTR（ "DX"、関数（）{ 
（xScale.step（） -rectPadding）/ 2;
 }）
.ATTR（ "DY"、20 ）
.text（関数（D）{
 リターンD; 
}）
.transition（）
.duration（ 2000 ）
.delay（関数（D、I）{
戻る私は400 * ; 
}）
// .ease（d3.easeElasticInOut） 
.ATTR（ "y"は、機能（D）{
 戻り、YSCALE（d）を
}）。

コード説明：

- と同様の長方形

----------------

免責事項：元の記事のこの記事では、CSDNブロガーである「ナンバースターなど夜明け」は、BY-SAの著作権契約、複製、元のソースのリンクと、この文を添付してくださいCC 4.0に従ってください。
オリジナルリンクします。https：//blog.csdn.net/qq_34414916/article/details/80033730

入門チュートリアルのD3.js v5のバージョン（第10章）

おすすめ