2.0.0 • Published 1 year ago
sci-glyph v2.0.0
在搭建论文中的可视化系统时，发现有诸多可视化图标设计可以被复用，故基于D3.js封装了一个sciGlyph库。
图标展示
用法
Step1: 首先下载npm包：
npm i sci-glyph
Step2: 引入方法：
import {instrumentPanelGlyph, radialAreaGlyph, spatialDistribution} from 'sci-glyph'
Step3: 每个方法调用需要传入两个参数：
canvasD3画布实例。option图形的配置项对象。每个图形的配置项如下面所述。
instrumentPanelGlyph
| 配置项 | 含义 | 值类型 |
|---|---|---|
| smallCircleSize | 外围小圆所表示的数据 | Array |
| pointerMax | 指针所表示数据的最大值 | Number |
| pointerMean | 指针数值 | Number |
| innerArcMax | 内圆弧最大值 | Number |
| innerArcMean | 内圆弧数值 | Number |
| upperArcMax | 上圆弧最大值 | Number |
| upperArcMean | 上圆弧数值 | Number |
| lowerArcMax | 下圆弧最大值 | Number |
| lowerArcMean | 下圆弧数值 | Number |
| centerRadius | 中心圆半径 | Number |
| outerRadius | 外圆半径 | Number |
| themeStyle | 主题颜色 | String |
| pointerFontSize | 字体大小 | String |
radialAreaGlyph
| 配置项 | 含义 | 值类型 |
|---|---|---|
| histogramData | 外围柱状图数据 | Array |
| radialAreaData | 径向面积图数据 | Array |
| axisData | 径向轴文本标记数据 | Array |
| themeStyle | 主题颜色 | String |
| centerText | 圆心文本 | String |
| opacityOfInnerRing | 内圆环透明度 | Number |
| innerRadius | 内圆半径 | Number |
| middleRadius | 中间圆半径 | Number |
| centerTextFontSize | 中心文本字体大小 | String |
| axisFontSize | 标记文本字体大小 | String |
spatialDistribution
| 配置项 | 含义 | 值类型 |
|---|---|---|
| smallCircleSize | 内层小圆所表示的数据 | Array |
| outerRadius | 外圆半径 | Number |
| innerRadius | 内圆半径 | Number |
| outerArcData | 外围圆弧数据 | Array |
| innerArcData | 内层圆弧数据 | Array |
| points | 地图中的点数据 | Array |
| chinaMap | 地图Geojson数据 | Geojson |
| colors | 类别颜色数组 | Array |
| smallCircleMarkColors | 内层小圆颜色 | Array |
| themeStyle | 主题颜色 | String |
| mapScale | 地图缩放 | Number |
| innerArcWidth | 内层圆弧宽度 | Number |
| pointsColors | 地图中点的颜色数组 | Object |
| pointR | 地图中的点的半径 | Number |
示例
import {instrumentPanelGlyph, radialAreaGlyph, spatialDistribution} from 'sci-glyph';
let canvas = d3.select(`#${containerId}`)
.append('svg')
.attr('width', 200)
.attr('height', 210);
instrumentPanelGlyph(canvas, {
smallCircleSize: [11,8,45,21,2,34,79,50,25,0],
pointerMax: 56.0204081632653,
pointerMean: 26.506147994187383,
innerArcMax: 100,
innerArcMean: 58,
upperArcMax: 100,
upperArcMean: 60,
lowerArcMax: 100,
lowerArcMean: 45,
centerRadius: 15,
outerRadius: 50,
themeStyle: '#5B9BD5',
pointerFontSize: '16px'
});