チケットの見える化にチャレンジしてみる(3-1: 準備編 D3.jsの導入(1))
こんばんは！株式会社スマレジ 、開発部のmasaです。
大晦日ですねー。masaも先ほど年越し蕎麦を食べたところです。 年の瀬になるとやっぱり一年の反省が頭の中を巡りますね・・・（一年の振り返りは前回の記事で書きましたけど汗）
さて、今回からはのびのびになっていた、D3.jsについて取り扱っていきます。
D3.jsって？
D3.jsは入力されたデータ(Data)を元にDOMを操作(Driven)しブラウザ上に様々な情報をグラフィカルに 表示(Document)するJSのライブラリです。
DOM操作系のライブラリというと、jQueryなんかもそうですし、実際D3.jsはjQueryの代わりに使用することもできます。 ただ、jQueryと違う点として、SVGのDOM要素も手軽に操作することができるところがあります。
注意点として、jQueryと同じDOM操作系のライブラリになるので、仮想DOMを扱うVueやReactと合わせて使用する場合は、 DOMの状態に注意しながら利用する必要があります。
まずは文字を表示させてみる。
というわけで実際に触っていきましょう。まずは背景を黒、文字色を白にしたspan 属性を作成して、 表示させてみます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D3.jsの練習</title> </head> <body> <div id="text-area"></div> <script type="text/javascript" src="js/d3.min.js"></script> <script type="text/javascript"> /** * div領域（#text-area)にspanで引数の文字列を表示する。 * 背景は黒、文字色は白。 */ function drawSpan(message) { const span = d3.create("span") .style("color", "white") .style("background-color", "black") .html(message) .node(); document.getElementById("text-area").appendChild(span); } drawSpan("Hello D3.js!"); </script> </body> </html>
表示してみると、こんな感じです。
drawSpan()関数が実処理です。ざっくり言うと、d3.~~~の部分で作成する属性、そしてそのプロパティを指定して最後の.node()でDOM化して変数に格納、作成したDOMをappendChild()で既存のdiv要素に埋め込んでいるんですね。
棒グラフを表示させてみる。
次は棒グラフの表示です。ここでは、整数値の入った配列を引数に、その整数をもとに棒グラフを書く処理を作成します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D3.jsの練習</title> </head> <body> <div id="chart-area"></div> <script type="text/javascript" src="js/d3.min.js"></script> <script type="text/javascript"> /** * div領域（#text-area)にspanで引数の文字列を表示する。 * 背景は黒、文字色は白。 */ function drawBarChart(data) { const div = d3.create("div") .style("font", "10px sans-serif") .style("text-align", "right") .style("color", "white"); div.selectAll("div") .data(data) .join("div") .style("background", "steelblue") .style("padding", "3px") .style("margin", "1px") .style("width", d => `${d * 10}px`) .text(d => d); document.getElementById("chart-area").appendChild(div.node()); } drawBarChart([10,3,6,8,22,15,1]); </script> </body> </html>
drawBarChart([10,3,6,8,22,15,1]);で指定している引数をベースに、下記のようなグラフが表示されます。
注目するのは、下記の部分です。
div.selectAll("div")
.data(data) // <-- ここで配列のデータを関連づけて
.join("div") // <-- 関連づけたデータをどの属性に紐づけるのかを指定
.style("background", "steelblue")
.style("padding", "3px")
.style("margin", "1px")
.style("width", d => `${d * 10}px`) // divの横幅を取り込んだdataの値に応じて変更
.text(d => d);
data()メソッドで数値情報を読み込み、スタイル指定の中で指定した数値を読み込むことで、div要素の幅を変更しています。
次回はSVG要素を使うケースと、transitionについてご紹介できればと思います。
