Stacked Graph
提示：在图表上悬浮鼠标指针或长按来交互。
基线函数：
随机更新数据：
main.js 可以当成一个独立的库来使用，下面我会简单介绍一下它的接口。
API
构造器
let stackedGraph = new StackedGraph('element-id' | svgElement: SVGElement);
构造器会在指定的 <svg> 元素上构造一个默认的 StackedGraph 对象。
显示数据
stackedGraph.updateDrawing(animated: boolean, animationTiming: number);
该函数会刷新堆叠图的显示，当用户还没有指定堆叠图数据时，会采用默认数据。该函数第一个参数是一个 boolean 为是否启用动画，第二个参数为动画的时间，单位为毫秒。
更新数据
stackedGraph.data = [[1, 2, 1, 3, 5, 2], [2, 3, 5, 7, 8, 3], ...]
每组数据都是一个数列，且要求每个数列长度均相等。数据变更会自动以动画刷新呈现。
stackedGraph.animationTiming = 1000;
以毫秒数设定默认动画的时间。
改变颜色
stackedGraph.colors = [ '#0089A7', '#3AA8C0', '#49D5EE', '#00748D' ];
通过改变数组来改变配色方案。数据组的颜色会在这个数组中循环。
注意：更改配色并不会立即刷新，你需要手动调用 updateDrawing 来刷新。
坐标映射
在这一可视化工具的设计中，每组数据只允许以一位数组的方式输入。如果需要改编横坐标的映射关系（不是从0开始，或是横坐标的含义非连续的度量值），可以通过修改下面这个函数来做到：
stackedGraph.tagMapping = index => '' + index;
上面是横坐标映射的默认行为，即将数组编号作为横坐标。下面一个事例改写了这个函数：
stackedGraph.tagMapping = index => index * 2 + 2 + '';
它的行为是，将横坐标映射从数组索引调整为 2, 4, 6, 8
注意：更改坐标映射并不会立即刷新，你需要手动调用 updateDrawing 来刷新。
基线函数
这个库提供了常见几种基线函数，包括零函数、Theme River、Wiggle 和加权 Wiggle 四种。你可以通过下面这种方式更改，每次更改后画面会自动刷新：
stackedGraph.baseline = 'zero' | 'theme' | 'wiggle' | 'weighted';
事件机制
这个库并没有提供原生的显示数据标签和鼠标交互的功能，尽管这意味着使用者需要自己手工编程来实现这一功能，但也意味着实现可以更加灵活和自由。事件机制的策略是：画面元素接受了一个鼠标/触摸事件，计算这个事件相关的堆叠图属性，例如是哪组数据被单击、光标现在在数组的哪个下标等。然后用一个自定义事件包裹之前的事件，并加入这些属性，再从根 <svg> DOM 元素 stackedGraph.dom 发射这一事件。你只需要从根 DOM 监听这一事件就可以了。
支持的事件有：'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mousewheel', 'touchstart', 'touchend', 'touchcancel', 'touchmove'
被包裹后的事件会以 stacked-xxx 形式命名，从根 <svg> DOM 发射出去。
下面的实例将展示这一事件机制的使用方式，以及所支持访问的成员：
stackedGraph.dom.addEventListener('stacked-mousemove', event => {
console.log(event.stackedIndex); // 数据组编号
console.log(event.dataIndex); // 光标所在数组下标
console.log(stakcedGraph.tagMapping(event.dataIndex));
console.log(event.stackedData); // 光标下数据
});
使用 CSS
你可以通过 DOM 的类去选取堆叠图中的元素，设置其样式。部分样式是在 JavaScript 代码中以内联方式指定的样式，如果需要更改，请在 CSS 中使用 !important 声明。
- 横坐标轴线具有类 stacked-h-axis
- 横坐标刻度具有类 stacked-h-grad
- 堆叠图多边形具有类 stacked-polygon，同时具有组编号 stacked-x 其中 x 可能是 1, 2, 3...
其他
这个 HTML 文档就是对 main.js 的使用范例。下面包含有一小段初始化代码可供参考。
Reference
Stacked Graphs – Geometry & Aesthetics, Lee Byron & Martin Wattenberg