好大的一个头

本章节，我们将实现图表中的折线图。 item为X轴坐标值，其余属性为各折线的属性值。 如图所示，面积图与普通折线图的不同之处在于叠加了一层带有透明度的与坐标轴闭合的多变形，所以，我们只需在绘制线条的时候线图层添加一个多边形即可。代码如下： 当面积图穿过0轴时，一个线条可能需要多…

在数据可视化过程中，数据不是单单的展示，更需要与图表交互。本章节中，我们将构建我们引擎的事件处理框架。 在HTML中，我们可以为某个DOM绑定相应的事件，这里我们将图元类比HTML中的DOM元素，我们可以给对应的图元绑定相应的事件。 首先我们定义一下事件基类Event。 由上述…

前几章节，我们已经通过图元来绘制图形，但是图元一旦绘制出来就保持那样了。当然我们可以通过可以用window.setInterval(), window.setTimeout(),和window.requestAnimationFrame()来设定定期执行一个指定函数修改图元的属…

上一章，我们已经介绍了图元基类Node,正如React构建组件库一样，我们也可以构建我们的基础图元库，以备我们后续开发使用。下面我们将简单介绍几个基本图元类。 折线是由多个坐标点组成的曲线，不同于Line由两个点组成。源代码如下：

由上一章可以看出，当我们在绘制一个复杂的图形时，我们的代码将膨胀，无论是阅读还是理解都将变得复杂。将复杂的图形分解成多个简单的基本图形组合，并是我们的目标。 一个复杂的页面由不同组件组合形成，我们将组件化的思想引入到我们引擎中来。 与组件对应，下面我们将其命名为图元。下面我们设…

工欲善其事，必先利其器。要想打造自己的可视化引擎，那就必须要先熟悉Cavas API。Canvas具体教程可以参考Canvas MDN。下面我们将对Cavas API进行简单的说明。 <canvas>是HTML 5 新增的元素，在浏览器创建一个固定大小的画布。通过Documen…