d3.geom.polygon

polygon函数有3个用途：

polygon.area() 用来计算多边形面积；polygon.centroid() 用来计算多边形中心坐标；polygon.clip(subject) 用来处理2个多边形重叠时，返回重叠区域多边形，用来剪切的多边形需要是逆时针方向且是凸多边形；

通过一个示例来展示。

1、数据

// dataset0 用来做裁切主体，它的坐标需要是逆时针方向 var dataset0 = [[100,100],[100,300],[300,300],[300,100]]; var dataset1 = [[200,50],[400,50],[400,400],[200,400]];

2、数据转换

var data0 = d3.geom.polygon(dataset0); var data1 = d3.geom.polygon(dataset1); var data2 = data1.slice();//复制一个data1，用来展示重叠的区域 data0.clip(data2);

通过d3.geom.polygon(dataset1)转换后的数据data1，主要是给数据加了3个方法，如图所示：

裁切后的数据data2就是2个多边形的重叠区域：

3、绘制图形

生成SVG容器

var width = 500; var height = 500; var svg = d3.select('body').append('svg').attr({ width: width, height: height });

把3个多边形都输出看效果

svg.append('polygon').attr({ points: data0, stroke: 'black', fill: '#ccc' }) svg.append('polygon').attr({ points: data1, stroke: 'black', fill: '#eee' }) svg.append('polygon').attr({ points: data2, stroke: 'red', fill: 'yellow' })

查看在线演示

相关资源：定量遥感中文版 梁顺林著 范闻捷译