sciGlyph

背景

---

在搭建论文中的可视化系统时，发现有诸多可视化图标设计可以被复用，故基于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'
});