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

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

d3.jsを使ってみる(2) append,remove

Sponsored Links

皆さんこんにちは
お元気ですか。私は暑すぎてどうにかなりそう。

さて、今回はd3を使って要素の追加をしてみましょう。
今のところJQueryと大差ない使い方しているような・・・・まぁいいか

<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">
	</script>
</body>

f:id:tereka:20140814145141p:plain

この中にあるscriptをいじっていきたいと思います。

append

appendを利用するとタグを追加することができます。

<script type="text/javascript">
	d3.select("body").append("p").text("あかさたな");
</script>

f:id:tereka:20140814152130p:plain

pタグで表示させる部分が一つ増えていますね。もちろん増やしたタグに対してtextやstyleを使ってCSSを適用させることができます。

remove

タグを削除する時に使います。

<script type="text/javascript">
	d3.select("body").remove("p");
</script>

f:id:tereka:20140814152605p:plain

もちろん、更地になります。