案例说明：数据字段到图形属性的映射
核心概念
数据可视化的核心是建立起【数据字段】 => 【图形属性】之间的映射关系。
映射关系分类
数据字段和图形属性之间的映射关系可以划分成三类
一个数据字段对应一个图形属性（1：1)
一个数据字段对应多个图形属性（1：n)
多个数据字段对应一个图形属性（n：1）
概念阐释
案例数据分析
[ { name: "水星", title: "Mercury", radius: 2440, period: 88, url: "asstes/Mercury.jpg", }, { name: "金星", title: "Venus", radius: 6052, period: 225, url: "asstes/Venus.jpg", }, { name: "地球", title: "Earth", radius: 6378, period: 365, url: "asstes/Earth.jpg", }, { name: "火星", title: "Mars", radius: 3397, period: 687, url: "asstes/Mars.jpg", }, ] 复制代码一个数据字段对应一个图形属性（1：1)
将X轴行星名称映射成位置 ，Y轴行星半径映射成圆形半径。
一个数据字段对应多个图形属性（1：n)
将行星名称映射成X轴上的位置，同时将行星名称映射成颜色。
.position("title*radius") .color("title", (value) => { switch(value) { case 'Mercury': return 'black'; case 'Venus': return 'grey'; case 'Earth': return 'blue'; case 'Mars': return 'red'; } }) 复制代码多个数据字段对应一个图形属性（n：1）
形状属性取决于两个数据字段，一个是公转周期，一个是行星半径。 当公转周期大于300天，半径大于3000km时，成圆形。否则成方块形。
.shape('period*radius', (period, radius) => { if (period > 300 && radius > 3000) { return 'circle'; } return 'square' })
作者：洛神赋
链接：https://juejin.cn/post/7037644792603344932
伪原创工具 SEO网站优化 https://www.237it.com/