こんにちは。
今日はD3.jsを使って六角形を描いてみます。
ゴリゴリと自分で六角形を描いてもよいですが、そこにあまり労力をかけたくないですよね。
そこで、プラグインhexbinを使ってみます。
こんなふうに４つの六角形を描きます。
ソースはこんな感じになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html><meta charset="utf-8"><style>.hexagon { fill: #1ee21e; //塗りつぶす色 stroke: #1ee21e; //線の色 stroke-width: .5px; //線の幅}</style><body><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に説明がありますので、そちらを参照してくださいね。