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]; } })

查看在线演示

相关资源：graham_scan_js, 在JavaScript中，Graham凸包算法的扫描实现.zip