利用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]
    }
  }
}

可视化图表：

1. Area,

2. AreaStack

3. Bar

4. BarGroup

5. BarStack

6. Geo

7. Line

8. Pie

9. PolarScatter

10. Radar

11. Scatter

12. TreeMap

13. Tree

可视化组件：

1. Scale
2. Axis
3. Tooltip
4. Brush
5. Grid
6. Legend
7. LinearGradient
8. VisualMap