D3.js 中的图表

图表可以定义为任何 2D 平面空间，以矩形表示。图表具有坐标空间，其中两个坐标 (x=0 和 y=0) 落在左下侧。图表具有坐标 X，从左向右增长。但是，坐标 Y 在从右向左的方向上增长。

如果我们讨论设计一个圆以及一些坐标，例如 x=20 和 y=20，我们从左下方向向右移动 20 个单位，然后向上移动 20 个单位。

SVG 中的坐标空间

SVG 中的坐标空间以类似于数学图的方式实现。但是，除了两个基本特征外，如下所示：

• SCG 的坐标空间包含坐标 x=0 和 y=0，它们落在左上方向。
• SCG 的坐标空间包含从顶部到底部增长的坐标 Y。

SVG 中的坐标空间图

如果我们讨论设计一个圆以及一些坐标，例如 x=20 和 y=20，我们将从左下方向向右移动 20 个单位，然后向上移动 20 个单位。可以表示如下：

让我们考虑一个 SVG 元素。 我们可以考虑任何 300 单位高和 300 单位宽的图表。 我们知道坐标 X 和 Y 位于左上角。 此外，我们知道，随着坐标 Y 的增长，它会从图表的顶部到底部移动。 我们可以设计 SVG 的元素如下：

图表说明

让我们以下面的折线图为例

折线图： 折线图可用于可视化随时间的变化。 该图比较任意两个变量。 两个变量都绘制在轴上。 折线图包含水平轴和垂直轴。

示例

输出