ホームページ > 記事 > ウェブフロントエンド > D3.js は P 要素の作成から始まります (ロード可能なデータを表示)_JavaScript のヒント
D3.js は P 要素の作成から始まります (ロード可能なデータを表示)_JavaScript のヒント
- WBOYオリジナル
- 2016-05-16 16:32:361422ブラウズ
D3 はデータ操作に基づいたビジュアル JS ライブラリです。d3 を理解するには、ロード可能なデータの最も基本的な表示から始めましょう。
HTML の基本フレームワークについては詳しく説明しません。コードから始めて説明します。
新しいテスト ディレクトリを作成し、このディレクトリ内に 2 つのフォルダー (demo と d3) を作成します。デモには書き込まれる HTML ファイルが保存され、d3 には d3.v3.js
が保存されます。デモ フォルダーに新しいindexP.html を作成し、次のコードをその中にコピーし、ダブルクリックしてブラウザーで開き、効果を確認します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Setting paragraphs' style conditionally, based on data</title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) {
return "I can count up to " + d;
})
.style("color", function(d) {
if (d > 15) { //Threshold of 15
return "red";
} else {
return "black";
}
});
</script>
</body>
</html>
この簡単なデモで実装される機能は、ボディにpタグを追加し、pタグにd3で読み込んだテキスト内容を追加し、機能設定条件に従って文字色を調整するというものです。
上記のWebページコードと本文中のJSコードは、ページ上に表示されるデータ操作です。今後の多くの例では、この部分のみを変更する必要があり、他の部分はページ フレームと見なすことができます。
ここでの内容は、前の記事で一般的に説明されています。d3 連結を使用して、同じオブジェクトに対する段階的なデータ操作を接続し、メンテナンスを容易にします。
d3.select("body") は body 要素を選択し、次のメソッドに接続します
.selectAll("p") はすべての段落を選択します
.data(dataset) は配列データを解析してロードします。配列の長さは 5 です。後続の各メソッドは、配列の添字
に従って配列要素に対して順番に実行されます。.enter() は、新しいデータバインドされたプレースホルダー要素を作成します (一時的に不明なタグを 5 つ作成するのと同等)。
作成されるタグの数は、選択された既存のタグの数とロードされたデータ配列の長さによって決まります。
この例のように、本文内の p タグが 5 つ未満の場合は、それらを作成します (現在本文内の p タグは 0 なので、5 つ作成されます)。
複数ある場合は作成されません。最終プレースホルダー要素と p 要素の合計数は 5 でなければなりません。
.append("p") はプレースホルダー要素を p 要素に変更します
.text(function(d) {}) 各段落の表示内容を制御する匿名関数を記述します。通常は文字列を返します。このメソッドでは何でも書き込むことができます。
この例では、各段落の対応する配列要素の値を加算した値をカウントできると出力できます
関数の形式は固定されており、この方法でのみ function(d) でデータを関数にロードできます。
.style("color","") は CSS のテキストの色属性を設定します。テキストと同様に、設定された文字列を使用して関数を使用して必要な操作を実行できます。この例では、段落に対応する受信値が 15 より大きい場合、行が赤に変わります
最終的に、以下に示すような効果が得られます。
今回は、SVG で円を描く方法と、円を結ぶ簡単な力図を紹介します。