D3は、データ操作に基づくVisual JSライブラリです。 D3を理解するために、ロード可能なデータの最も基本的な表示から始めます。
HTMLの基本的なフレームワークについてはあまり言いません。最初にコードを入れてから説明します。
新しいテストディレクトリを作成し、このディレクトリの下に2つのフォルダーデモとD3を作成します。 DEMOは書かれているHTMLファイルを保存し、D3はD3.V3.jsを保存します
デモフォルダーの下に新しいindexp.htmlを作成し、次のコードをコピーし、ダブルクリックしてブラウザで効果を開きます。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> d3：データに基づいて条件付き段落のスタイルを設定します</title> <script = "text/javascript" src = "../ d3/d3.v33データセット= [5、10、15、20、25]; d3.Select（ "body"）。selectal（ "p"）.data（dataset）.enter（）.Enter（ "p"）.text（function（d）{return "can" can can up " + d;}）.style（" color "、function（d）{if（d> 15）{// return"; </script> </body> </html>このシンプルなデモで実装された関数は、ボディにPタグを追加し、PタグにD3でロードされたテキストコンテンツを追加し、関数設定条件に従ってテキストの色を調整します。
上記のWebページコードとボディのJSコードは、ページに表示されるデータ操作です。将来の多くの例については、この部分を変更するだけで、他の部分はページフレームワークと見なすことができます。
ここでの前の記事では、一般に、D3接続詞を使用して同じオブジェクトの段階的なデータ操作を接続して、簡単にメンテナンスすることについて説明しています。
D3.Select（ "Body"）ボディ要素を選択し、次の方法に連結します
.Selectall（ "P"）すべての段落を選択します
.Data（データセット）は、ロードアレイデータを解析します。配列の長さは5です。連結する各メソッドは、将来5回実行されます。アレイサブスクリプトに従って、配列要素のメソッド操作を順番に実行します。
.enter（）は、新しいバインドされたデータのプレースホルダー要素を作成します（5つの一時的に不明なタグの作成に相当）。
作成された数値の数は、選択した既存のタグの数とロードされたデータアレイの長さに基づいて決定する必要があります。
この例のように、体内に5個未満のPタグがある場合、それは作成されます（現在、体内のPは0であるため、5が作成されます）。
作成されていない以上のものがある場合、最後のプレースホルダー要素とP要素の総数は5でなければなりません。
.Append（ "P"）プレースホルダー要素をP要素に変更します
.text（function（d）{}）匿名関数を書き込み、各段落の表示コンテンツを制御し、通常は文字列を返します。この方法では、とにかく書くことができます。
この例では、彼が出力を可能にします私は各段落と対応する配列要素値にカウントすることができます
関数形式は固定されています。この方法でのみ、データを関数にロードできます。
.style（ "color"、 ""）は、CSSのテキスト色属性を設定します。テキストと同様に、セット文字列を機能して実行して、必要な操作を実行できます。この例では、段落の対応する受信値が15を超える場合、線は赤くなります
最後に、私たちが見る効果は、図に示されているようにです：
この記事はこの記事で終わります。以下は、SVGで円を描く方法と、サークルを接続する単純な力図を描く方法です。