くりーむわーかー

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

2015年04月

OpenFlashChartのURLのパラメータ

たまに、Web上にグラフ出すのにOpenFlashChartを使う事がある。 世の中のグラフ描画するライブラリて、だいたいモダンなブラウザじゃないと動かないので・・・。 古めのブラウザ使ってるところ(まぁIE8とか)だと、Flashで書いてくれるコレが何かと手っ取り早い。

グラフにしたいデータをJsonで返すWebAPIを作って使うのが楽でいいんだけど、パラメータのところではまったのでメモ。

OpenFlashChartのデータファイル指定で、WebAPIのURLを↓の感じで指定する。

swfobject.embedSWF(
"open-flash-chart.swf", "my_chart",
"600", "250", "9.0.0", "expressInstall.swf",
{ "data-file": "/api/somedata/100?hoge=10&year=2013" }
);

↑のURL指定だと何故かクエリ文字列の&以降が無視されたURLでリクエストされる。理由はナゾ。いろいろ試して、&をURLエンコードした「%26」を代わりに使うと上手くいく模様。↓上手く行く書き方。

swfobject.embedSWF(
"open-flash-chart.swf", "my_chart",
"600", "250", "9.0.0", "expressInstall.swf",
{ "data-file": "/api/somedata/100?hoge=10%26year=2013" }
);
ハマった。

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で持ってくる要素を空振りさせるようにしないと上手くいかない。
問合せ