More Related Content
Similar to D3jsを使ってみた@wcan lt大会
Similar to D3jsを使ってみた@wcan lt大会 (20)
More from Takuya Ueda (20)
D3jsを使ってみた@wcan lt大会
- 1. d3jsを使ってみた
2012/11/18(Mon)
WCAN mini Markup vol.12
「ライトニングトーク大会
HTML5、CSS3、JavaScript」
- 9. <div id="chart">
</div> HTML
var chart = d3.select('#chart');
var data = [10, 20, 30, 40];
chart.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function(d){
return d * 10 + "px";
}).text(function(d) {
return d;
});
JavaScript ※CSSは省略
http://jsfiddle.net/uedatakuya/r8s2B/
- 17. SVGのライブラリとし
ても便利!
● svgとHTMLで名前空間が違う
● 要素の生成めんどくさい
○ 名前空間指定して生成
● knockoutJSとかちゃんと動かない
○ テンプレートエンジンを改造しなきゃダメ
- 20. {
x: 100,
y: 100,
width: 50, 視覚化
height: 50,
angle: 0,
color: "red"
}
変更...
{
x: 100, 連動しない!
y: 100,
width: 50,
height: 50,
angle: 45,
color: "blue"
}
- 22. {
x: 100,
y: 100,
width: 50, 視覚化
height: 50,
angle: 0,
color: "red"
}
変更... 監視... ライブラリ
{
x: 100,
通知!
y: 100,
width: 50,
height: 50,
angle: 45,
color: "blue"
}
- 24. 参考サイト
● d3js
○ https://github.
com/mbostock/d3/wiki
● d3jsではじめるデータビジュアライゼー
ション入門
○ http://www.slideshare.
net/kadoppe/d3js