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