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')

注意在生成便利店位置时，我们用的数据是原始的数据；

查看在线演示