【D3.js 学习总结】22、D3几何 - 泰森多边形-CSDN博客

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

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

查看在线演示