【D3.js】ドロネー三角分割図を作成してみた

ボロノイ図と対になるドロネー図をGoogle Map上に表示してみました。
D3がドローネ図を描画するために必要な座標の計算を行ってくれるので、簡単に表示することができます。

サンプル

ドローネ図を描いている部分だけ。

//ボロノイ変換関数
var voronoi = d3.geom.voronoi()
    .x(function(d){ return d.x } )
    .y(function(d){ return d.y } );
    
//ドロネー座標データ取得
var delaunay  = voronoi.triangles(positions); 

//ドロネー図パス描画 
var du = svgoverlay.selectAll(".du")
    .data(delaunay)
    .enter()
    .append("path")
    .attr("class", "du")
    .attr("d",function(dd, i) {
        return "M" + dd.map(function(d){
                return [d.x, d.y]
            }).join("L")  + "Z";
    })
    .attr({
        stroke:"blue",
        fill:"none",
        "stroke-width": 1
    });

//ボロノイ変換関数

var voronoi = d3.geom.voronoi()

.x(function(d){ return d.x } )

.y(function(d){ return d.y } );

//ドロネー座標データ取得

var delaunay = voronoi.triangles(positions);

//ドロネー図パス描画

var du = svgoverlay.selectAll(".du")

.data(delaunay)

.enter()

.append("path")

.attr("class", "du")

.attr("d",function(dd, i) {

return "M" + dd.map(function(d){

return [d.x, d.y]

}).join("L") + "Z";

})

.attr({

stroke:"blue",

fill:"none",

"stroke-width": 1

});

d3.geom.voronoiのtrianglesメソッドを使うことで、ドローネ図を描くための座標データが取得できます。

サンプル

投稿者: shimizu