灏天阁

可视化中常见的数学函数

· Yin灏

利用 G2 5.0 的自定义图形能力，试着做了两个自定义图表：

发现，在做可视化图表过程中，特别是需要自定义绘图的时候后，经常会用到的一些函数，这些方法在 G2 中也有，所以这里抽出来大概说一说。收藏一下，后续内容有扩充，会继续更新文章。

两个点之间的向量

计算两个点之间的向量，输出参数其实是两个点相对于原点（0, 0）的向量。

function sub([x1, y1], [x2, y2]): [number, number] {
  return [x1 - x2, y1 - y2];
}

计算两个坐标点之间的距离

非常常见的方法，经常用来计算线的长度、原的半径等等。

function dist([x1, y1], [x0, y0]): number {
  return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
}

计算两个点的中点

比如会找一些关键点，用于绘制 Q 的控制点等等，会需要用到这个函数。

function mid([x1, y1], [x2, y2]): [number, number] {
  return [(x1 + x2) / 2, (y1 + y2) / 2];
}

计算一个向量的弧度

特别在极坐标、螺旋坐标下，经常需要用到弧度计算的公式。

function angle([x, y]): number {
  return Math.atan2(y, x);
}

根据弧度以及半径，计算点的位置

非常常见，根据弧度来确定一个点在圆弧上的坐标。

function getPointInArc(angle: number, radius: number): [number, number] {
  return [Math.cos(angle) * radius, Math.sin(angle) * radius];
}

计算在圆弧上的两个点，在圆弧上的中点

比如，计算饼图每个扇形上数据标签显示的位置，就需要这个方法。

function midInArc(p1, p2, center): [number, number] {
  const m = mid(p1, p2);
  const v = sub(m, center);
  const a = angle(v);
  const radius = dist(p1, center);
  const p = getPointInArc(a, radius);
  return [p[0] + center[0], p[1] + center[1]];
}

总结

可视化本身并不难，在上手了基本的绘图 API 之后，这些 API 无论是浏览器原生的 Canvas、SVG，还是封装之后的 d3，AntV G2，在绘图上，最难的还是各种各样的图形数学计算。

- Book Lists -