D3.js は P 要素の作成から始まります (ロード可能なデータを表示)

D3.js は P 要素の作成から始まります (ロード可能なデータを表示)_JavaScript のヒント

WBOY

リリース： 2016-05-16 16:32:36

オリジナル

1464 人が閲覧しました

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 でなければなりません。