皆さんこんにちは
お元気ですか。私は元気です。
さて、d3.jsについて解説したいと思います。
D3とは
Data-Driven-Document,Dが3つあってD3です。
何やらグラフやらチャートやら書けます。htmlやCSS,SVGと呼ばれるものをDOMよろしく編集することができます。
日本語版はこちら
実際に使ってみる
今回はd3を使ってDOMよろしくCSSやhtmlを動的に変化させたいと思います。
元のhtml
<head> <meta charset = "utf-8"> </head> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <p>あいうえお</p> <p>あいうえお</p> <p>あいうえお</p> </body>
重要な部分はこの1文です。
これを読み込むことでd3を利用することができます。(ダウンロード版もあるのでそちらが必要な場合は公式から落としてきましょう)
テキストを変化させる
<head> <meta charset = "utf-8"> </head> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <p>あいうえお</p> <p>あいうえお</p> <p>あいうえお</p> <script type="text/javascript"> d3.select("body").selectAll("p").text("わをん"); </script> </body>
d3.selectでbodyを選択し、selectAllで全てのpを対象にする。.textでテキストを変更するような操作をしています。
これにCSSを追加してみましょう。
CSSの編集
script typeの部分を以下のスクリプトに置き換えましょう
<script type="text/javascript"> var p = d3.select("body").selectAll("p"); p.text("わをん") .style("font-size","50px") .style("color","red"); </script>
因みに中は無名関数とかも書けます。つまり、こんな形式もできるといった意味です。
.style("color",function(){ return "blue"; });
値の取得
alert(p.style("color"));
RGB形式で色の値を取得します。
次回はもう少し複雑なのを行おうかななんて思っています。