のんびりしているエンジニアの日記

ソフトウェアなどのエンジニア的な何かを書きます。

d3.jsを使ってみる(1) HTML,CSSの書き換え

Sponsored Links

皆さんこんにちは
お元気ですか。私は元気です。

さて、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>

f:id:tereka:20140814145141p:plain

重要な部分はこの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>

f:id:tereka:20140814145329p:plain
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>

f:id:tereka:20140814145657p:plain
因みに中は無名関数とかも書けます。つまり、こんな形式もできるといった意味です。

.style("color",function(){
	   		return "blue";
	   	});

値の取得

alert(p.style("color"));

RGB形式で色の値を取得します。

次回はもう少し複雑なのを行おうかななんて思っています。