GitHub |
您所在的位置：网站首页 › sci论文配色常用 › GitHub |
GitHub
|
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' }); |
【本文地址】
今日新闻 |
推荐新闻 |