Tag: javascript Tag: d3js Tag: グラフ
d3.js
グラフ作成のライブラリ。
IE9以降、Chrome、Firefox等で利用出来る。
リンク
D3.js - Data-Driven Documents
JP Home
https://github.com/d3/d3/wiki/JP-Home
日本語ドキュメント
D3.js例文辞典
書籍
データビジュアライゼーションのためのD3.js徹底入門 Webで魅せるグラフ&チャートの作り方
- 古籏 一浩 (著)
サンプルが多く、分かりやすい。
適当なテスト
意味は特に無い練習。
HTMLタグの要素を時間を掛けて変形
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="hoge" style="position:absolute;width:400px;height:400px;background-color:yellow;"></div>
<script>
//d3.select("body").style("background-color", "black");
d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });
d3.select("body").transition()
.duration(20000)
.style("background-color", "black")
.style("color", "white")
.style("font-size", "300%");
// div または #hoge または div#hoge
d3.select("div#hoge").transition()
.duration(10000)
.style("left", "300px")
.style("width", "50px")
.style("height", "50px")
.style("background-color", "black");
</script>
</body>
</html>
タグPをいじる
http://ja.d3js.node.ws/ を参考に練習。
firefoxとchromeでappendの動きが違った。なぜ?
<html>
<body>
<input type="button" id="btn" value="実行1" onclick="d3_test1();">
<input type="button" id="btn" value="実行2" onclick="d3_test2();">
<input type="button" id="btn" value="実行3" onclick="d3_test3();">
<hr>
<p>1111111</p>
<p>22222222</p>
<p>3333333</p>
<p>4444444</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
function d3_test1() {
var selP =d3.selectAll("p");
selP.style("color",function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
}
function d3_test2() {
var selP =d3.selectAll("p");
selP.data([10,15,20,25,30,35])
.enter().append("p")
.text(function(d) { return "append:"+d;})
;
selP =d3.selectAll("p");
selP.style("color",function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
})
.style("font-size",function(d) {
return d+"px";
})
;
}
function d3_test3() {
var selP =d3.selectAll("p");
selP.data([10,15])
.exit().remove()
;
}
</script>
</body>
</html>
文字
文字を追加する
<svg id="hogehoge"></svg>
<!-- というのがHTMLであって、次の様なJavaScriptのコード -->
<script>
var svg = d3.select("#hogehoge").attr("width", 640).attr("height",480);
svg.append("text")
.text("普通のサーバーなら漢字も表示可能")
.attr("font-size","12px")
.attr("x",35)
.attr("y",15)
.style("font-weight", "500")
.attr("stroke", 'none')
.attr("fill", 'red')
;
</script>
文字は「.attr("stroke", 'none')」としておかないと、やや太い字になる。