入門チュートリアル（第III）のD3.js V5バージョン - 要素とバインドデータを選択します

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

D3.jsで、要素を選択し、要素を結合することは、最も基本的な内容で、内容も非常に重要であり、あなたが全体のチュートリアルを読んであなたはこれらのチュートリアルはD3.jsであることがわかります要素と結合要素を選択に基づいてフォローアップの作業を拡張

1.要素を選択

D3.jsでは、選択された機能は、2つの要素を有しています

d3.select（）
d3.selectAll（）
この関数は、2セットを返す選択することです

次のように一般的な使用方法は次のとおりです。

  VAR体= d3.select（ "身体"）; //は、文書の中でbody要素を選択
するvar SVG = body.select（ "SVG"）; // SVG要素の中で体を選択
VAR P = body.selectAll（ "P" ）; // すべてのp要素に体を選択
VAR P1 = body.select（ "P"）; // 本体の第p要素を選択

図2に示すように、データバインディング

D3.js、データがドキュメントにバインドされているDOMにバインドすることができます。例えば、P要素と5のページ整数、5およびpデータがある場合、私たちは一緒に結合します。結合後、操作は時間の要素だったとき、非常に使いやすいでしょう。このデータに依存する必要があります！（jsのコードのフォローアップのセクションでは、これに基づいて書かれているので、おそらくこれは、あなたが徐々に後の章を通じて表示されます、それは問題ではない、あなたが言う作るか、または混同されます）

二つのデータ機能バインドD3.js

データ（）：選択セットを伝えるためにバインドされた配列、および選択の配列は、各要素がバインドされて、それは1人の関係（または徐Minruiここにあなたが問題を見つけるだろう、次のセクショントーク）である
データム（）：全てにデータの選択されたセットを結合する
）（比較データをより一般的

データム（）を使用

<身体> 
<P>犬</ P> 
<P> CAT </ P> 
<P>豚</ P> 

<スクリプト> のvar STR =は"動物である"; // 新しい文字列を作成するvar P = D3を。 （ "本体"を選択）
.selectAll（ "P" ）; 
p.datum（STR）// 結合 
の.textを（関数（D、I）{
 リターン + I + "要素" "の" + D; 
}）; </ SCRIPT> 
</ BODY>

結果：

コード説明：

- コードの役割は、次に選択されたセット、関数（D、I）、結合の要素にアクセスすることにより、未知の機能上の三世代<P> STR文字列を結合するために存在し、求めることができます。（関数（D、I）、dはデータ、バインド有する即ちデータ要素を表すしばしば現れ、この機能の背後にある、代表的な指標のI、0から代表開始のインデックスデータ）

データ（）を使用して、

<身体> 
<P>犬</ P> 
<P>猫</ P> 
<P>豚</ P> 

<スクリプト> のvarデータセット= [ "かわいい"、 "かわいい"、 "脂肪" ];
VARの P = d3.select（ "ボディ" ）
.selectAll（ "P" ）; 
p.data（データセット）
の.text（関数（D、I）{
 戻り "第" + I + "个动物" + D; 
}）; </スクリプト> 
</ BODY>

結果：

コード説明：

-事実とデータム（）がほぼ同じ、しかしは、配列要素であり、選択セットは、対応関係を有する
----------------
免責事項：この記事は「CSDNブロガーなるよう夜明けわずか星「オリジナルの記事、CC 4.0 BY-SAの著作権契約、複製、元のソースのリンクと、この文を添付してくださいに従ってください。
オリジナルリンクします。https：//blog.csdn.net/qq_34414916/article/details/80026813

入門チュートリアル（第III）のD3.js V5バージョン - 要素とバインドデータを選択します

おすすめ