当前位置: 首页 > 文档资料 > D3.js 帮助文档 >

d3-polygon

优质
小牛编辑
124浏览
2023-12-01

这个模块提供了基础的二维多边形几个基本的操作。每个多边形被描述为一个二维数组的数组: [​[x1, y1], [x2, y2], …], 可以是闭合的(第一个点坐标等于最后一个点坐标)也可以是开放的(第一个点坐标不等于最后一个点坐标)。典型的多边形各个定点安装逆时针顺序连接,坐标系统的左上角为 ⟨0,0⟩ 点。

Installing

NPM:npm install d3-polygon。也可以下载 latest release. 可以直接从 d3js.orgstandalone libraryD3 4.0 一部分的形式直接载入. 支持 AMD, CommonJS 以及最基本的标签引入形式. 通过标签引入会暴露一个 d3 全局变量:

<script src="https://d3js.org/d3-polygon.v1.min.js"></script>
<script>

var hull = d3.polygonHull(points);

</script>

在浏览器中测试 d3-polygon

API Reference

"https://github.com/d3/d3-polygon/blob/master/src/area.js" title="Source Code" target="_blank" rel="noopener noreferrer"><>

返回指定 polygon 的面积。如果多边形的定点是逆时针连接(假设坐标系统 ⟨0,0⟩ 点位于左上角)则返回值为正,否则为负或 0.

"https://github.com/d3/d3-polygon/blob/master/src/centroid.js" title="Source Code" target="_blank" rel="noopener noreferrer"><>

返回指定 polygoncentroid(几何中心)

"https://github.com/d3/d3-polygon/blob/master/src/hull.js" title="Source Code" target="_blank" rel="noopener noreferrer"><>

使用 Andrew’s monotone chain algorithm(二维凸包算法) 计算指定的一系列点的 convex hull(凸包)。返回的凸包由一组输入点的子集表示,并且顺序为逆时针。如果输入的 points 个数小于 3 则返回 null。

"https://github.com/d3/d3-polygon/blob/master/src/contains.js" title="Source Code" target="_blank" rel="noopener noreferrer"><>

当且仅当指定的 point inside the specified polygon(在指定的多边形内部) 则返回 true。

"https://github.com/d3/d3-polygon/blob/master/src/length.js" title="Source Code" target="_blank" rel="noopener noreferrer"><>

返回指定 polygon 的周长.

最后更新:

类似资料

  • 这个模块提供了基础的二维多边形几个基本的操作。每个多边形被描述为一个二维数组的数组: [​[x1, y1], [x2, y2], …], 可以是闭合的(第一个点坐标等于最后一个点坐标)也可以是开放的(第一个点坐标不等于最后一个点坐标)。典型的多边形各个定点安装逆时针顺序连接,坐标系统的左上角为 ⟨0,0⟩ 点。 Installing NPM:npm install d3-polygon。也可以下载

  • 视图移动以及缩放是一种将用户注意力聚焦在感兴趣区域的一种流行的交互技术。操作直接,容易理解: 点击并拖拽平移,使用滚轮进行缩放,当然也可以通过触摸进行。平移和缩放被广泛的应用在地图中,但是也可被应用到其他的可视化比如时间序列以及散点图中。 缩放行为通过 d3-zoom 模块实现,能方便且灵活到 selections 上。它处理了许多 Installing NPM 安装: npm install d

  • 这个模块实现了用来计算一组二维点 Voronoi diagram(泰森多边形) 或 Delaunay triangulation(德劳内三角剖分) 的 Steven J. Fortune’s algorithm 算法。这个模块的实现大多是基于 Raymond Hill 的工作。 泰森多边形不仅仅在视觉上具有吸引力,在交互方面也非常实用,比如在散点图中增加点的目标面积。参考 “Strikeouts

  • transition 是一个类 selection 的接口,用来对 DOM 进行动画修改。这种修改不是立即修改,而是在规定的事件内平滑过渡到目标状态。 应用过渡,首先要选中元素,然后调用 selection.transition,并且设置期望的改变,例如: d3.select("body") .transition() .style("background-color", "red")

  • 这个模块提供了一个高效的队列,能管理上千并发动画同时保证与并发或分段动画一致的同步时序。在内部使用 requestAnimationFrame 进行 fluid animation(如果支持的话),否则切换使用 setTimeout来实现。 Installing NPM 安装: npm install d3-timer. 此外还可以下载 latest release。也可以直接从 d3js.org

  • 在可视化时间序列数据、分析时间模式或处理一般时间时,常规时间单位的不规则性很快就变得明显起来。在 Gregorian calendar(公历) 中,大多数月份有 31 天但是有些月份只有 28 或者 29、30 天。大多数年份有 365 天但是 leap years(闰年) 有 366 天。在 daylight saving(夏令时) 中一天可能有 23 25 小时。更复杂的是世界各地的夏时制不同