0.0.33 • Published 5 years ago
color-data v0.0.33
ColorData
Data Visualization with canvas and d3
数据可视化
基于canvas/svg
关系拓扑图
流程逻辑图
json数据结构化
节点数据刷新图像重绘(diff算法)
应用条件
需要将json数据的派生结构 转换为 可视化数据图形
例子
const data=[
{
name: `node-${new Date().getTime() * Math.random()}`, // 节点图名称/id
text: '', // 图中显示字样
isShow: true, // 是否默认显示图
type: 0, // 0:方框图 1:菱形图 2:椭圆图 3:四边形图
value: null, // 节点图所代表值 [object | string | number | boolean]
events: {
'mousedown':function(data,_ev){}, // 绑定事件名 : 绑定事件(冗余参数,事件对象)
}, // 节点图所绑定事件
x: 0, // 节点图中心点x坐标值
y: 0, // 节点图中心点y坐标值
width: 160, // 节点图宽度
height: 40, // 节点图高度
children: [], // 节点图子节点
}
];
当json数据输入给本插件,由本插件转化为可视化拓扑图像
测试
基于三大框架(vue/angular/react)搭建的平台中,进行测试和项目优化
使用
- 最终效果
安装依赖
npm install color-data --save-dev
使用
<div id="color-data" style="width:100%;height:800px;"></div>
new ColorData({
container: '#color-data',
data: [
{
text: '1',
width: 260,
height: 100,
children: [
{
text: '1-1',
type: 2,
width: 160,
height: 80,
children: [
{
text: '1-1-1 长文本测试 12321321312314523524354322354325243543254325243532442342',
type: 3,
width: 260,
height: 100,
},
{
text: '1-1-2',
type: 2,
width: 160,
height: 60,
},
{
text: '1-1-3',
width: 160,
height: 80,
children:[
{
text: '1-1-3-1',
type: 3,
width: 260,
height: 100,
},
{
text: '1-1-3-2',
type: 2,
width: 160,
height: 100,
},
],
},
{
text: '1-1-4',
type: 1,
width: 160,
height: 160,
}
]
}, {
text: '1-2',
type: 1,
width: 160,
height: 60,
}
]
},
{
text: '2',
width: 260,
height: 100,
}
]
});
0.0.33
5 years ago
0.0.32
5 years ago
0.0.31
5 years ago
0.0.30
5 years ago
0.0.29
5 years ago
0.0.28
5 years ago
0.0.27
5 years ago
0.0.26
5 years ago
0.0.25
5 years ago
0.0.24
5 years ago
0.0.23
5 years ago
0.0.22
5 years ago
0.0.21
5 years ago
0.0.20
5 years ago
0.0.19
5 years ago
0.0.18
5 years ago
0.0.17
5 years ago
0.0.16
5 years ago
0.0.15
5 years ago
0.0.14
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.7-0
5 years ago
0.0.6-0
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago