可视化库的设计空间总结
2020-10-27 本文已影响0人
videring
组件使用形式上可以大致分成三种：
-
声明式
如echarts中json配置方式
{ "x": "time", "y": "price", "series": [ ... ] }
-
命令式
如d3
const chart = new Chart ();
chart.addAxis ( new XAxis (...));
chart.addSeries ( new LineSeries (...));
-
组件式
在react或vue中使用，如react-though
<Chart>
<XAxis />
<LineSeries />
</Chart>
按抽象层次可分：
-
图形操作库(Graphics Libraries)
它们可表达能力最强，同时开发成本也最高，更接近原生的API，Canvas、WebGL。
这类库有：Processing, p5*js, Raphael, Rough.js, three.js, PhiloGL, luma.gl, two.js, PixiJS, react-rough, react-three-fiber。 -
低抽象搭建单元(Low-level Building Blocks)
非常独立也非常灵活。这类库中的组件有各自明确的作用，可以组合使用（也可和其他库组合）创造出图表。组合方式有大致的约束条件，留给开发很大的发挥空间。
最经典的例子就是D3
const x = d3.scaleBand().rangeRound([0, width]);
const y = d3.scaleLinear().range([height, 0]);
const svg = d3.select("svg").attr("width", width).attr("height", height);
x.domain(data.map(d = >d.date));
y.domain([0, d3.max(data, d = >d.value)]);
svg.selectAll("bar").data(data).enter().append("rect").style("fill", "steelblue").attr("x", d = >x(d.date)).attr("width", x.band()).attr("y", d = >y(d.value)).attr("height", d = >(height - y(d.value)));
-
图形语法库(Visualization Grammars)
介于高抽象搭建单元和底抽象搭建单元之间。典型的库有ggplot2、Vega-Lite、G2、Muze。
与英语等语言的语法如何定义词性（名词、动词等）并给出将这些词性组合成有意义的句子的结构类似，图形语法也定义了自己的部分，并提供了一种将它们组合起来描述输出图形的结构。这种严格的结构正是它们区别于低抽象搭建单元的原因。统计图表使用可以分成以下六个部分来描述：
DATA：从数据集创建变量的一些操作
TRANS：各种数据转换（例如排序）
SCALE：数量级变换（例如log）
COORD：坐标系（例如极坐标）
ELEMENT：图形（例如点）以及对应的视觉属性（颜色等）
GUIDE：一些辅助元素（例如坐标轴、图例等）
-
高抽象搭建单元(High-level Building Blocks)
典型的库有ECharts、Highcharts、Plotly、deck.gl，以及基于React的Victory、 React-Vis、 Semiotic。
如果低抽象搭建单元相当于乐高块，可以非常自由地进行各式各样的组合，这些高抽象搭建单元就像提前组装好的较大模块。
与图形语法类似，高抽象搭建单元需要以一定的规则和其他组件组合才能创造出一个图表。不过，两者之间有些常见的不同之处：
- 有些图表库将坐标轴和数据量变换结合起来。而在图形语法中SCALE是一个组件，而坐标轴只是GUIDE中的一部分；
- 高抽象搭建单元库会在各种地方灌入数据，通常是随着样式系列设置中。而图形语法将数据处理（DATA）和数据转换（TRANS）分开，只有在ELEMENT 模块中会引用字段名或者变量；
- 它是更宽泛意义上的“无图表类型”，也会包含一些为更加复杂图表而封装特殊逻辑的系列或者图层，比如河流图。这种其实更接近第5个分类——图表组件库。不过，它仍然不像图表组件库那样添加一个图表类型就能开发出一个完整的图表。
举个例子，箱线图可以用图形语法描述成柱图和线图的图层组合（例如Vega-Lite就会这么做）。在高抽象层次的图表库，可能为了方便起见，会定义一个组合两个图层并且封装交互逻辑的CandlestickSeries组件。然后用CandlestickSeries图层再加上坐标轴、网格线，即可创建出箱线图。而图表组件库会直接提供一个包含坐标轴、网络线等所有元素的CandlestickChart组件，开发者只需要灌入数据即可。
-
图表组件库(Chart Templates)
图表库的最大优点在于开箱即用，上手方便。开发者只需要选择一种图表类型，将准备好的数据处理成要求的格式灌入即可。
这类图表库可以只有一个图表组件，也可以数百个图表组件。每个组件通过图表类型来引用，比如Bar（柱图）、Pie（饼图）、Area（面积图）、Calendar（日历图）等。
有些库提供了几种不同抽象层次的封装。例如：
dc.js 既有图表组件，又有高抽象搭建单元
G2Plot 是基于图表语法库G2上的图表组件库
react-vis 既有高抽象搭建单元，也有图表组件
而D3事实上也是穿梭于几个层级之间。例如，d3-scale 从图形语法的层面定义了scale的模块；而 d3-shape更接近于底层图形库。
g2Plot 图标库
