くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

d3

D3使ってワードクラウドを作る

以前(とか)、Rでワードクラウドを作るのをやったけど、やっぱ固定の画像じゃなくしたい。とゆーわけで、D3使ってSVGで作れるようにしたい。テキストクリックで何かにリンクとかさ。出来たらいいなー。

とりえあず、ランダム配置で作ってみる。↓の感じ。

tamesi

うーん、イマイチ。イマサンくらい。とりえあず、文字が重ならないようにはすぐできた。 getBBox()っていうのが組み込みにあるのね。初めてしった。まぁ、こーゆーことやろうとしないと 用途がなさそうだしの。。。

フォントサイズとか色の段階のつけ方を工夫すればもうちょっとよくなるかしら。 配置の仕方も調べてみたけど割とめんどーな気がする。とりえあず、サイズと色の工夫をしてみましょ。

d3でSVG

d3使ってSVGを追加する時のメモ。

・ 一括で追加する

下の感じ。
var dataset = [10,5,15];
var svg = d3.select("body")
	.append("svg")	
	.attr("width",500)
	.attr("height",500);

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x",5)
	.attr("y",function(d,i){return i*42;})
	.attr("width",50)
	.attr("height",function(d,i){return 40;});

・ 一括で追加のを2回に分けてやる

下の感じ。
var dataset = [10,5,15];
var svg = d3.select("body")
	.append("svg")	
	.attr("width",500)
	.attr("height",500);

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x",5)
	.attr("y",function(d,i){return i*42;})
	.attr("width",50)
	.attr("height",function(d,i){return 40;});

svg.selectAll("rect2")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x",5)
	.attr("y",function(d,i){return i*42;})
	.attr("width",50)
	.attr("height",function(d,i){return 40;});

よく分からないけど、足したい時はselectAllで持ってくる要素を空振りさせるようにしないと上手くいかない。
問合せ