【D3.js 学习总结】24、D3几何 - 多边形 

d3.geom.polygon

【D3.js 学习总结】24、D3几何 - 多边形 

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个方法,如图所示:

【D3.js 学习总结】24、D3几何 - 多边形 

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

【D3.js 学习总结】24、D3几何 - 多边形 

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

查看在线演示

上一篇:【D3.js 学习总结】21、D3交互事件


下一篇:Radware:用户对云安全担忧日益加深