こんにちは。
今日はD3.jsを使って六角形を描いてみます。
ゴリゴリと自分で六角形を描いてもよいですが、そこにあまり労力をかけたくないですよね。
そこで、プラグインhexbinを使ってみます。
こんなふうに４つの六角形を描きます。
ソースはこんな感じになります。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.hexagon {
fill: #1ee21e; //塗りつぶす色
stroke: #1ee21e; //線の色
stroke-width: .5px; //線の幅
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.hexbin.v0.min.js"></script>
<script>
//表示範囲の指定
var width = 960,
height = 400;
// 六角形を描く位置（４つ描いてみる）
var points = [
[0, 20],
[20, 20],
[40, 20],
[60, 20]
];
var hexbin = d3.hexbin()
.radius(10); //半径
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var hexagon = svg
.append("g") //g要素でグルーピング
.attr("class", "hexagon") //"hexagon"というclass名にします
.selectAll("path") //pathを指す空リファレンス
.data(hexbin(points)) //六角形のデータをパース
.enter().append("path") //path要素をつくる
.attr("d", hexbin.hexagon()) //d属性に六角形のパスデータをセット
// 右にd.x、、下にd.yだけ移動(配列pointsの座標位置に移動)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
</script>
D3.jsは書き方が独特ですよね。
上のソースコードが難しいと感じられたあなたには、
「インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化」
がおすすめです。
D3.js、SVGの基本的なことから書かれているので理解しやすいと思います。
hexbinについて詳しく知りたい方は、
githubに説明がありますので、そちらを参照してくださいね。