D3のインストール
セレクタ
2つの要素を選択するための機能D3は、これら2つの関数の結果は、選択セットと呼ばれて返します。
d3.selectは（）：最初に指定された要素の全てを選択し
、指定のすべての要素を選択する：（）d3.selectAllを
、例えば、一般的な使用の以下のセットを選択し、。
VAR体= d3.select（ "身体" ）; //は、文書の中でbody要素を選択
VAR P1 = body.select（ "P" ）; // 身体の最初のp要素を選択
VARをP = body.selectAll（ "P"）; // p個の選択本体内のすべての要素
VAR SVG = body.select（ "SVG" ）; // 選択された身体のSVG要素に
VAR rects = svg.selectAll（ "RECT" ）; // 選択SVGすべての矩形要素
のvar ID = body.select（ "＃IDは "）; //は、本体IDの要素を選択
するvarクラスを= body.select（ "クラス。 "）; // クラス土類元素選択された身体で
チェーン：
d3.select（「＃コンテナ」）テキスト （「1000phone」）ATTR（「フォントサイズ」、「12ピクセル」）; ..
データ選択とデータバインディングがしばしば一緒に結合するために使用され、D3は、ことによりますデータをバインドするには、2つの機能：
データム（）：データセットの選択への結合
）（データ：バインドセットを選択するためのアレイは、アレイ素子の値は、結合選択及び設定された
要素を次の三つの段落があると仮定する。
VARデータ= '逆戦い2020';
VAR =コンテナ（ "＃アプリ"）d3.select;
container.selectAll（ 'P'）
.datum（データ）
の.text（関数（D、I）{
リターン"セクション" + I +「結合データ要素は、次のとおり、」+ D;
}）
以下の結果と、コンテンツ要素に三項を、このデータを使用してデータを結合した後：
0番目の要素データバインディングは、次のとおりです。戦争2020に対して
データバインディングの最初の要素は次のとおりです。戦争2020に対して
第二の要素のデータバインディングは、次のとおりです。戦争2020に対して
データのための（）：
アレイ、三項の要素に結合したそれぞれの次の配列の各要素があります。
VaRのデータリスト= [10、20、 30]、
通話データ（）データを結合し、以下のように、三項素子列列が結合されて代わります。
データリスト= VAR [10、20、30、である];
VAR =コンテナ（ "＃アプリ"）d3.select;
//更新データ
container.selectAll（ 'P'）
//データ・ソース・バインディング
.DATAを（データリスト）
の.text（機能（データ、インデックス）{
データを返す;
}）
天然にテキストの三項の結果が3つの文字列配列を変化させました。
10
20
30
また、以下の対応する、未知の機能（D、i）を使用する上記のコードの関数で：
D -------データのデータ
私は-------インデックスindex
ときとき、私== 0、D 10。私は1 ==ときとき、dが20です。ときとき、私== 2、D 30。このとき、文字列配列のセット三項の3つの要素が直接Dを返すことができる（iは、d）の一関数関数への1つです。
選択、挿入、削除要素は、
要素を選択します
10
20
30
最初の要素を選択.. d3.select（「本体」） （「P」）スタイル（「色」、「赤」）を選択し、
すべての要素を選択
.. d3.select（ "身体"）のSelectAll（ "P"）スタイル（ "色"、 "赤"）;
第二の要素を選択します
20
d3.select（「＃1秒」）スタイル（「色」、「赤」）;. 2つの要素を選択した後、二つの要素がクラスに追加され、月
君は
複数の要素を選択する必要があり、使用のSelectAll。。d3.selectAll（「MyClassの」）スタイル（ 『色』、 『赤』）
要素の挿入要素関数への2つです：
APPEND（）：セット選択素子挿入インサートの端（）：セット以前に選択された要素を仮定する挿入される3つの段落要素、上記と同じ。
APPEND（）
d3.select（「身体」）アペンド（「P」）、テキスト（「スター」）。。。
インサート
.. d3.select（ "身体"）インサート（ "P"、 "＃1秒"）のテキスト（ "20"）;
削除要素
d3.select（「＃秒」）のremove （）;.
）（入力）（更新を理解し、終了（）
データバインディングは、表示され一致しないDOM要素とデータ要素の数を問うその後、出入り可能性がある場合でありますこの問題に対処します。新しいDOM要素を追加する操作を入力し、過剰のDOM要素を除去するように動作可能で終了
更新は、入力し、[終了]のデータセットや不確実な関係の数を選択するとき、それはケースを扱う、3 D3で非常に重要な概念です。
アップデート（）は、単に対応する要素（=要素を対応する結合データの数）を満たすために、そのような機能は、実際に存在しない場合にのみ、以下を入力し、終了するためだけこのような機能を想像して説明します。しかし、単に、それを直接操作することができ、対応する要素を満たすために、すぐにテキスト、スタイルとすることができ、他の操作を行いました。
入力（）、不十分な対応する要素（データバインディングの数>対応する要素）がある場合、不十分な対応する要素、追加すべき典型的要素が存在する場合、そう結合データの数に等しいです。一般APPEND操作の背後にある話。
あまりにも多くの要素が（データバインディングの数<対応する要素）に対応する終了（）、場合対応する要素も、通常削除要素ので、結合データの数に等しいです。これは通常、削除操作を続けます。
配列[3、6、9、12、15]である場合、アレイの選択に結合し、これは3つのp要素を設定します。あなたが想像することができ、該当する2つのデータ要素は存在しません、この時間D3は、データに対応する2つの空の要素を作成し、この部分を入力しますと呼ばれています。データ要素に対応する部分が更新と呼ばれています。配列[3]である場合、2つの要素が何もデータバインディングを持たないであろう、そのデータのどの部分が結合出口と呼ばれていません。図に示すように。
IMG
次のコードを意味する。この場合、要素の数が0である、すなわち、いかなるSVG四角形要素が存在しません。アレイデータセットは、配列要素の数は、（注意深く図の空想）を、その選択された部分を入力し、選択セット0を結合した後、あるそのデータの各々が有するこのような要素を追加するのに十分である（追記）元素、添加対応する要素。
svg.selectAll（ "RECT"）// SVG内のすべての矩形選択
.dataセクションを（データセット）//バインド配列
.enter（）//指定した選択部分を入力して設定します
（ "RECT"）を.append //十分な数を追加長方形の要素
- 更新と入力します使用
する場合、それぞれの要素（データバインディングの数>対応する要素）が不十分、あなたが要素（APPEND）を追加する必要があります。そこP、バインド長大きく3つの本体要素は、サブセットpの選択にアレイ3よりも今であり、その後、別々に二つの部分に入力して更新プロセス。
データセット= [3、6、9、12、15]でした。
// p要素のボディを選択
するvar P = d3.select（ "体" ）のSelectAll（ "P"）を;
//更新部を取得
するvar更新= p.data（データセット）。
//は、取得部入力
VAR）の（= update.enter入ります。
//更新処理部：属性値更新
update.textを（関数（D）{
リターン"更新" + D;
}）;
//処理部に入力します付与属性値の要素を追加した後
（ "P"）をenter.append
の.text（関数（D）{
リターン+ D "を入力";
}）;
結果ページ：
図3は、入力
します6。
入力9。
12を入力している
15入力
こと注：
アプローチは、一般に、更新部分である：属性値部分が一般的なアプローチを入力して更新することである：添加元素は、属性値を付与します
- 出口アップデートとの使用
すぎ各要素（要素に対応する<データを結合の数）、冗長な要素を削除する必要があります。そこ3つの本体要素pは今である、バインド少ない選択されたアレイ3より長さに二つの部分のそれぞれP、及び更新処理と出口に設定されています。
データセット= [3]でした。
// p要素のボディを選択
するvar P = d3.select（ "体" ）のSelectAll（ "P"）を;
//更新部を取得
するvar更新= p.data（データセット）。
//出口部分の取得
VAR出口を= update.exit（）;
//更新処理部：属性値更新
update.textを（関数（D）{
リターン"更新" + D;
}）;
//終了処理部は、P要素のプロパティ変更
exit.text（関数（D）{
リターン「終了」;
}）;
プロセスの//出口部分通常要素を削除
）（// exit.remove;
ことを注意：一般的なアプローチの出口部分である：削除要素（削除）
トランジション
D3は、このアニメーションは、スタイルプロパティへの移行によって達成することができ、アニメーションをサポートしています。その相補体との間の補間は、線形、弾性など、様々な方法をサポートします。このような数字、文字、及び色種データパスの種類として構築された補間方法にさらにD3、。
以下の4つの方法に関連したトランジション効果を、開始します。
//移行オブジェクトを作成します。しかし、それぞれが選択したので、フォーカス遷移（）メソッドは、遷移を作成する（「RECT」）。遷移（）方法使用d3.selectをすることができ、それは直接一般d3.transitionありません（）。d3.transition（[選択]、[名]）
//遅延時間を設定。移行後にのみ、特定の開始時間後に発生します。ミリ秒単位で。transition.delay（[遅延]）
//ミリ秒（遅延時間は含まない）遷移の継続時間を設定します。以下のような：期間（2000年）、2000ミリ秒を続けています。transition.duration（[期間]）
//な線形遷移としてなど、先に数回バウンス、トランジションスタイルを設定し... transition.ease（vlaue [、引数]）
次に、トランジション効果を加えます。
VAR幅= 600;
VAR高さ= 400;
VAR SVG = d3.select（ "＃ボディ"）
.append（「SVG」）
.ATTR（「幅」、幅）
.ATTR（「高さ」、高さ）
svg.append（ "RECT"）
.ATTR（ "塗りつぶし"、 "黄色"）
.ATTR（ "X"、100）
.ATTR（ "Y"、100）
.ATTR（ "幅"、100）
.ATTR（ "高さ"30）
.transition（）
.duration（750）
.delay（関数（D、I）* I {10リターン;}）
.ATTR（"幅"300）
.ATTR（"高さ」、300）
に加えD3は、トランジションの外側に設けられ、あなたはまた、CSSアニメーションによる遷移元素の効果を達成することができます。
簡単なグラフを作ります
一般的なラベル
のRectポリラインポリゴン楕円サークルラインの
パスG DEFS使用テキストアニメーション
<!-- <rect x="50" y="100" width="100" height="50" fill="red" style="" stroke="blue" stroke-width="5" /> -->
<!-- <ellipse cx="200" cy="200" rx="50" ry="100" style="fill:orange; stroke: orangered; stroke-width: 5px;" /> -->
<!-- <line x1="50" y1="50" x2="450" y2="450" stroke="red" stroke-width="3" /> -->
<!-- <circle cx="225" cy="225" r="100" style="fill:peru;" /> -->
<!-- <polygon points="50,20 150,60 120,200 100,200" style="fill:pink;" fill="none" stroke="red" stroke-width="5" /> -->
<!-- <!-- <polyline points="10,20 50,60 120,200 200,300" fill="blue" stroke="red" stroke-width="5"></polyline> -->
-->
<!-- <path d="M30,30 L200,200 L230,260" fill="none" stroke="green" stroke-width="5" />
- >
<!-- <defs>
<g id="group">
<rect x="50" y="100" width="100" height="50" style="fill:green;" stroke="blue" stroke-width="5">
<animate attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
<circle cx="225" cy="225" r="100" style="fill:peru;">
<animate attributeName="cx" from="225" to="100" dur="5s" repeatCount="indefinite" />
</circle>
</g>
</defs> -->
<!-- <use xlink:href="#group" x="30" y="30" />
<use xlink:href="#group" x="130" y="130" /> -->
<!-- <text x="200" y="200" style="fill: none; stroke: red; stroke-width: 1; font-size: 45px;">NZGP1916</text> -->
<clipPath id="myClipPath">
<rect width="200" height="100" x="200" y="200"></rect>
</clipPath>
<circle cx="260" clip-path="url(#myClipPath)" cy="260" r="100" style="" />
