利用D3与React打造一套可视化构建框架
基于D3.js + React 实现的数据可视化构建工具 在线预览地址 http://47.107.66.252:8080/#/
源码地址 https://github.com/CBDxin/chart
启动
npm run start
声明式配置语法
{
height: 700,
width: "100%",
charts:[
{
type:"Area",
name:"区域图",
key:"Area"
}
],
components:[
{
type:"xAxis",
position:"bottom"
},
{
type:"yAxis",
position:"left"
}
],
dataSet:{
domain:[1,2,3,4,5,6],
range:{
Area:[300,500,400,20,600,900]
}
}
}
可视化图表:
-
Area,
-
AreaStack
-
Bar
-
BarGroup
-
BarStack
-
Geo
-
Line
-
Pie
-
PolarScatter
-
Radar
-
Scatter
-
TreeMap
-
Tree
可视化组件:
- Scale
- Axis
- Tooltip
- Brush
- Grid
- Legend
- LinearGradient
- VisualMap