利用D3与React打造一套可视化构建框架
发布于 5 年前 作者 CBDxin 6058 次浏览 来自 分享

基于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
3 回复

用 svg 做散点图会有性能问题吧，当散点数量比较多的时候创建了太多的 <circle> dom 节点，相对而言 line chart 倒是还好，因为再多的数据实际上只是一个 <path> 节点

@hyj1991 学习为主 未来有空的话会打算增加canvas的渲染方式的

如果可视化选型D3的话需求方面就是要高度定制化, 你又给搞成配置式的了, 那感觉还不如用 echarts. =，=

回到顶部