【D3.js 学习总结】25、D3几何 - 凸包

d3.geom.hull

hull函数用于计算指定坐标点的外围边界，用一个场景来描述，某片草原上有100只羊在不同的位置，我们需要将羊群所在的草场圈起来，那只要将羊群最外围的羊通过一根线连起来就可以实现，同理，hull就是用来计算这个外围边界的方法；

通过一个示例来展示。

1、数据，随机生成100只羊的坐标

var width = 500;
var height = 500;

var randomX = d3.random.normal(width / 2, 60);
var randomY = d3.random.normal(height / 2, 60);
var dataset = d3.range(100).map(function() {
  return [randomX(), randomY()];
});

2、数据转换

var data = d3.geom.hull(dataset);

转换前的数据，如图所示：

转换后的数据，只保留了边界上的点，如图所示：

3、绘制图形

生成SVG容器

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

生成羊群边界路径，注意这里用的是datum方法，因为这里不需要遍历数据

var hull = svg.append("path")
    .datum(data)
    .attr({
      d: function(d){
        return 'M'+ d.join('L') +'Z';
      },
      fill: 'steelblue',
      stroke: '#000',
    });

生成羊群坐标点，注意这里的数据是原始坐标数据dataset

var circle = svg.selectAll('circle')
  .data(dataset)
  .enter()
  .append('circle')
  .attr({
    r: 3,
    fill: '#fff',
    stroke: '#000',
    cx: function(d){
      return d[0];
    },
    cy: function(d){
      return d[1];
    }
  })

查看在线演示