エベレストフロントエンドデータの視覚化

1.D3.jsの概要1.D3
とは何
ですか？D3のフルネームは（データ駆動型ドキュメント）であり、データ駆動型ドキュメントに変換されます。つまり、主にデータの視覚化に使用されるJavaScriptライブラリです。本質的にJavaScriptであるため、すべての機能をJavaScriptで実現できますが、特にデータの視覚化において、ワークロードを大幅に削減できます。D3は、視覚化を生成する複雑な手順をいくつかの単純な機能に合理化しました。、いくつかの簡単なデータを入力するだけで、さまざまなゴージャスなグラフィックに変換できます。

2.データの視覚化とは何ですか。データの視覚化が必要な理由

退屈で複雑なデータをグラフィカルに表示します。これはデータの視覚化です。たとえば、一連のデータ[5,15,23,78,110,57,29,34,71]があります。ここには多くのデータはありません。サイズの関係を直接確認する方が簡単ですが、次のようにグラフィックで表示する方が直感的です。図：
データ視覚化バーgraph.png

グラフィック表示により、サイズの関係を明確に知ることができます。これは、より強力な機能を備えたD3.jsフレームワークの単なるアプリケーション例です。
3.フロントエンドデータの視覚化にD3のようなjsフレームワークを使用する理由

上記のデータ視覚化棒グラフを例にとると、ネイティブjsを使用してこの効果を実現します。

目標：水平ヒストグラムを使用して、次のデータを視覚的に表示します
var data = [5,15,23,78,110,57,29,34,71];

HTMLコード：

cssコード：

#barChart { background：＃f0f0f0; パディング：10px; font-family：Verdana; 色：白；} #barChart .bar { left：0px; 高さ：20px; 背景：青; マージン：5px; } js代码：

//表示されるデータオブジェクト
vardata = [5,15,23,78,110,57,29,34,71] ;;

window.onload = function（）{ //データの長さを計算しますvar len = data.length;

//获取容器DOM对象
var barChart = document.querySelector("#barChart");

//创建len个div对象，并设置其属性
for(var i=0;i<len;i++){
    //创建一个新DOM元素
    var e = document.createElement("div");
    //设置元素的CSS类为bar
    e.setAttribute("class", "bar");
    //设置元素宽度为对应数据值
    e.style.width = data[i] + 50;
    //设置元素的文本为对应数据值
    e.innerText = data[i];
    //向容器追加此DIV对象
    barChart.appendChild(e);
}

};
非常にシンプルで基本的なデータチャートであっても、多くのjsコードを記述する必要があることがわかります。視覚化データがますます複雑になると、開発効率を向上させるためにD3のようなパッケージライブラリが必要になります。

4.D3のいくつかの機能の概要

（1）。d3.jsはグラフィックス描画ライブラリではなく、HTML、SVG、CSSなどの視覚要素を描画するために標準のWebテクノロジーに依存しています。
（2）.d3.jsは、コレクションの概念に基づくDOM操作ライブラリであり、DOM操作をカプセル化します。jQueryと同様に、d3はセレクターに依存して要素のグループを選択し、コレクションを作成してから、コレクションオブジェクトメソッドを使用してDOMを操作します。
（3）.d3.jsの多くの機能はデータ処理に焦点を合わせています。データをグラフィックスにマッピングするには、データ範囲変換、補間計算、レイアウト計算などの簡単なタスクがたくさんあります。
（4）.d3。 jsの中核は、データと視覚要素のマッチングです。1つのデータは1つの視覚要素に対応し、1つの値は1つの視覚要素の属性に対応します。d3は、この複雑なマッチングプロセスをカプセル化し、データと視覚化要素を宣言するだけでデータ視覚化のタスクを完了できるようにします。

4.
D3 D3公式ウェブサイトのダウンロードと使用には詳細なドキュメントがありますが、英語の
D3githubアドレスには詳細なインストールと紹介があります

2. D3.js文法の基本
1.選択セット
d3.select（）またはd3.selectAll（）を使用して要素を選択した後に返されるオブジェクトは、選択セットです。
D3は、次のような関数を継続的に呼び出すことができます。d3.select（）。selectAll（）。text（）。これはチェーン構文と呼ばれ、JQueryの構文と非常によく似ています。次の例では、D3を使用してテキストとスタイルを変更します

HelloWorld

Hello World 1

Hello World 2

操作結果2.要素を選択してデータをバインドする（1）要素を選択する

d3.select（）：最初は指定されたすべての要素を選択することです
d3.selectAll（）：指定されたすべての要素の選択です

var body = d3.select（ "body"）; //ドキュメント内のbody要素を選択します
varp1 = body.select（ "p"）; //本文内の最初のp要素を選択します
varp = body.selectAll（ "P"）; //本体内のすべてのp要素を選択
varp = body.selectAll（ "。car"）; //本体内のクラス名carを持つすべての要素を選択
varsvg = body.select（ "svg" ）; //本文のsvg要素を選択します
varrects = svg.selectAll（ "rect"）; // svg内のすべてのsvg要素を選択します
（2）データのバインド
D3非常に強力な機能は、データをにバインドする機能です。 DOM上、つまりドキュメントにバインドされています。
たとえば、Webページには段落要素と整数100があるため、整数100を結合できます。バインド後、要素を操作するためにこのデータに依存する必要がある場合に非常に便利です。

D3では、データは次の2つの関数によってバインドされます
。datum（）：データを選択セットにバインドします
data（）：配列を選択セットにバインドし、配列の各値を選択セットに接続します。要素のバインド

次に、datum（）とdata（）を使用して、データを次のHTML要素にバインドします。

ジェーンが大好き

私は建州が大好きです

datum（）で実現

var str =“ nightzing”;
var body = d3.select（“ body”）;
var p = body.selectAll（“ p”）;
p.datum（str）;
p.text（function（d、i）{ return "th" + i + "要素にバインドされたデータは" + d; }）;実行結果

上記のコードでは、名前のない関数function（d、i）が使用されています。選択セットがバインドされたデータを使用する必要がある場合、この方法で使用されることがよくあります。これには2つのパラメータが含まれています。

dはデータを表し、要素にバインドされたデータです。
iは、0から始まるデータのインデックス番号であるindexを表します。

エベレストフロントエンドデータの視覚化

おすすめ