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

   
   Area.png

2. AreaStack

   
   AreaStack.png

3. Bar

   
   Bar.png

4. BarGroup

   
   BarGroup.png

5. BarStack

   
   BarStack.png

6. Geo

   
   Geo.png

7. Line

   
   Line.png

8. Pie

   
   Pie.png

9. PolarScatter

   
   PolarScatter.png

10. Radar

    
    Radar.png

11. Scatter

    
    Scatter.png

12. TreeMap

    
    TreeMap.png

13. Tree

    
    Tree.png

可视化组件：

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