d3.geom.voronoi()
在日常生活中有这样的场景,在一个城市中有很多的便利店,当你走在城市的任意地方,怎么才能找到离你了近的便利店呢?这种场景就适合用泰森多边形来解决。
通过一个示例来展示。
1、数据
var dataset = [[18,162], [114,403], [261,98] ]; //假设这是三家便利店
2、数据转换
var width = 500;
var height = 500;
var voronoi = d3.geom.voronoi()
.clipExtent([[0, 0], [width, height]]);//从画面左上角到右下角为显示区间
var data = voronoi(dataset);
转换后的数据如图所示。
通过转换,将数据变成折线图的每个顶点坐标,这样我们就可以通过将顶点连接起来组成一个个不规则区域;
3、绘制图形
生成SVG容器
var svg = d3.select('body').append('svg')
.attr('width',width)
.attr('height',height)
颜色比例尺
var color = d3.scale.category10();
生成折线路径
svg.append("g").selectAll("path")
.data(data)
.enter()
.append("path")
.attr('fill',function(d,i){
return color(i);
})
.attr("d", function(d,i){
// 通过d.join("L")方法将每个顶点连接起来
return "M" + d.join("L") + "Z";
});
生成便利店位置
svg.append('g').selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', function(d,i){
return d[0];
})
.attr('cy', function(d,i){
return d[1];
})
.attr('r', 5)
.attr('fill','#fff')
注意在生成便利店位置时,我们用的数据是原始的数据;