オープンデータとプログラミング

D3.js

超カンタン!D3.jsで六角形を描く

こんにちは。

今日はD3.jsを使って六角形を描いてみます。

ゴリゴリと自分で六角形を描いてもよいですが、そこにあまり労力をかけたくないですよね。

そこで、プラグインhexbinを使ってみます。

こんなふうに4つの六角形を描きます。

hexagon

ソースはこんな感じになります。

<!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;

// 六角形を描く位置(4つ描いてみる)
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に説明がありますので、そちらを参照してくださいね。

https://github.com/d3/d3-plugins/tree/master/hexbin