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

查看在线演示