D3 多边形模块

d3

D3 多边形模块

参考

本文主要介绍 d3-polygon 模块 它提供了一些方法以获取与平面/二维多边形相关的基本几何特性,例如求面积、周长等。

该模块所处理的二维多边形需要以一系列二元数组来表示 [​[x0, y0], [x1, y1], …](两个元素 [x, y] 分别表示多边形的顶点的横纵坐标值),在下文中使用 polygon 来表示。多边形可以是闭合的(起始顶点和结束顶点相同,即第一个二元数组与最后一个二元数组相同),也可以是开放的(起始顶点和结束顶点不相同)

方向性

假定数组所表示的多边形顶点是按照逆时针 counterclockwise 顺序排列的

坐标系采用默认的 svg 坐标体系,即原点 [0, 0] 位于左上角,横纵正方向分别是向左和向下

  • d3.polygonArea(polygon) 返回一个带正负符号的数值,表示多边形 polygon 的面积
    当入参数组 polygon 所表示的多边形顶点,是按照逆时针排序的,则返回的面积是正值;如果顶点是按照顺时针排序的,则返回的面积是负数
    坐标系

    在判断多边形的顶点的方向性时,默认依据 svg 的坐标体系,即原点 [0, 0] 位于左上角,横纵正方向分别是向左和向下

    js
    // 顶点是顺时针方向排列,返回的面积是负数
    d3.polygonArea([[1, 1], [1.5, 0], [2, 1]]) // -0.5
    鞋带公式

    D3 在该模块中使用 Shoelace formula 鞋带公式来求解多边形面积

    算法的具体实现方式可以查看 Github 仓库的源码

    公式的证明可以查看这个[讲解视频](https://youtu.be/sNPh8jgngE0

  • d3.polygonCentroid(polygon) 返回一个二元数组 [x, y] 表示多边形的质心/重心 centroid坐标值
  • d3.polygonHull(polygon) 返回一个数组,表示多边形的凸包
    该方法返回的该数组的元素是一系列二元数组,表示凸包的各个顶点,并以逆时针顺序排列;如果传入的参数 polygon 是一个少于三个元素的数组,则该方法返回 null
    凸包

    凸包 convex hull 是指将多边形 polygon 的所有顶点都包含在内的最小多边形

    凸包
    凸包

    可以直观地将其理解为将位于最外周的一系列数据点连起来所构成的路径

    所以该方法所返回的数组中的元素(一系列的二元数组)是来自于参数 polygon 中,即凸包的顶点摘自原始的多边形

    D3 在该模块中使用安德鲁单调链算法 Andrew's monotone chain algorithm 计算凸包

  • d3.polygonContains(polygon, point) 返回一个布尔值,以判断给定的数据点 point(一个二元数组 [x, y] 分别表示数据点的横纵坐标),是否在 polygon 多边形里(不包括在多边形的边上)
  • d3.polygonLength(polygon) 返回一个数值,表示多边形 polygon 的周长

Copyright © 2024 Ben

Theme BlogiNote

Icons from Icônes