首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

Posted in Javascript onMay 09, 2019

现在用D3.js + react做一个带坐标轴和比例尺的柱形图。我已经尽力把代码全部注释上了，最后我也会把完整柱形图代码奉上。如果还有疑惑的，可以去翻看一下我之前介绍的方法，以下方法都有介绍到。

还有数据都是自己定义的假数据，大家参考一下制作方法即可。

首先定义柱形图的数据、绘图区域的宽高、和上下左右的边距:

var width = 600;        //SVG绘制区域的宽度
  var height = 500;        //SVG绘制区域的高度
  //定义数据
  var dataList = [50,43,120,87,99,167,142]
  //定义上下左右的边距
  var padding = {top:20,right:20,bottom:100,left:100}

然后设定SVG:

var svg = d3.select("#body")     //选择id为body的div
     .append("svg")      //在<body>中添加<avg>      .attr("width",width)    //设定<svg>的宽度属性
      .attr("height",height)    //设定<svg>的高度属性

定义比例尺:

//定义比例尺
  //x轴宽度
  var xAxisWidth = 300;
  //y轴宽度
  var yAxisWidth = 300;

  //x轴比例尺(序数比例尺)
  var xScale = d3.scale.ordinal()     //构建一个序数比例尺
     .domain(d3.range(dataList.length)) //设定定义域
     .rangeRoundBands([0,xAxisWidth],0.2)//代替range()设定值域，并将结果取整
  //y轴比例尺(线性比例尺)
  var yScale = d3.scale.linear()     //创建一个线性比例尺
     .domain([0,d3.max(dataList)])  //设定定义域
     .range([0,yAxisWidth])    //设定值域

然后添加矩形:

//添加矩形
   svg.selectAll("rect")
     .data(dataList)      //绑定数据
     .enter()       //获取enter部分
     .append("rect")      //添加rect元素，使其与绑定数组的长度一致
     .attr("fill","fuchsia")    //设置颜色
     .attr("x",function(d,i){   //设置矩形的x坐标
      return padding.left+xScale(i)
     })
     .attr("y",function(d){    //设置矩形的y坐标
      return height - padding.bottom-yScale(d)
     })
     .attr("width",xScale.rangeBand()) //设置矩形的宽度
     .attr("height",function(d){   //设置矩形的高度
      return yScale(d)
     })

然后为矩形添加文字标签:

//为矩形添加标签文字
    svg.selectAll("text")
     .data(dataList)      //绑定数据
     .enter()       //获取enter部分
     .append("text")      //添加text元素，使其与绑定数组的长度一致
     .attr("fill","white")    //字体颜色
     .attr("font-size","14px")   //字体大小
     .attr("text-anchor","middle")  //文本相对基点的位置
     .attr("x",function(d,i){   //设置文字的x坐标
      return padding.left+xScale(i)
     }) 
     .attr("y",function(d){    //设置文字的y坐标
      return height - padding.bottom - yScale(d)
     })
     .attr("dx",xScale.rangeBand()/2) //相对于当前位置在x方向上平移的距离  
     .attr("dy","2em")     //相对于当前位置在y方向上平移的距离
     .text(function(d){     //文字内容
      return d
     })

最后定义坐标轴:

//定义坐标轴
  //x轴
  var xAxis = d3.svg.axis()      //创建一个默认的新坐标轴      
     .scale(xScale)      //设定坐标轴的比例尺
     .orient("bottom")     //设定坐标轴的方向
  //重新设置y轴比例尺的值域，与原来的相反
  yScale.range([yAxisWidth,0])
  //y轴
  var yAxis = d3.svg.axis()      //创建一个默认的新坐标轴 
     .scale(yScale)      //设定坐标轴的比例尺
     .orient("left")      //设定坐标轴的方向
     
  //添加x轴和平移
  svg.append("g")         //在svg中添加一个包含坐标轴各元素的g元素
   .attr("class","axis")      //定义class名
   .attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")") //将x轴进行平移
   .call(xAxis)        //将自身作为参数传递给xAxis函数
  //添加y轴和平移
  svg.append("g")         //在svg中添加一个包含坐标轴各元素的g元素
   .attr("class","axis")      //定义class名
   .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth)+")") //将y轴进行平移
   .call(yAxis)        //将自身作为参数传递给yAxis函数

大家看一下效果图:

D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

完整代码:

import React, { Component } from 'react';
import * as d3 from 'd3'; //引入d3
class Bar extends Component {
 constructor(props) {
  super(props);
  this.state = {}
 }

 componentDidMount(){   //将方法在componentDidMount生命周期钩子函数中面调用
  this.oneMethod()
 }
 oneMethod(){
  var width = 600;        //SVG绘制区域的宽度
  var height = 500;        //SVG绘制区域的高度
  //定义数据
  var dataList = [50,43,120,87,99,167,142]
  //定义上下左右的边距
  var padding = {top:20,right:20,bottom:100,left:100}
  var svg = d3.select("#body")     //选择id为body的div
     .append("svg")      //在<body>中添加<avg>
     .attr("width",width)    //设定<svg>的宽度属性
     .attr("height",height)    //设定<svg>的高度属性
  //定义比例尺
  //x轴宽度
  var xAxisWidth = 300;
  //y轴宽度
  var yAxisWidth = 300;
  //x轴比例尺(序数比例尺)
  var xScale = d3.scale.ordinal()     //构建一个序数比例尺
     .domain(d3.range(dataList.length)) //设定定义域
     .rangeRoundBands([0,xAxisWidth],0.2)//代替range()设定值域，并将结果取整
  //y轴比例尺(线性比例尺)
  var yScale = d3.scale.linear()     //创建一个线性比例尺
     .domain([0,d3.max(dataList)])  //设定定义域
     .range([0,yAxisWidth])    //设定值域
  //添加矩形
   svg.selectAll("rect")
     .data(dataList)      //绑定数据
     .enter()       //获取enter部分
     .append("rect")      //添加rect元素，使其与绑定数组的长度一致
     .attr("fill","fuchsia")    //设置颜色
     .attr("x",function(d,i){   //设置矩形的x坐标
      return padding.left+xScale(i)
     })
     .attr("y",function(d){    //设置矩形的y坐标
      return height - padding.bottom-yScale(d)
     })
     .attr("width",xScale.rangeBand()) //设置矩形的宽度
     .attr("height",function(d){   //设置矩形的高度
      return yScale(d)
     })
  //为矩形添加标签文字
    svg.selectAll("text")
     .data(dataList)      //绑定数据
     .enter()       //获取enter部分
     .append("text")      //添加text元素，使其与绑定数组的长度一致
     .attr("fill","white")    //字体颜色
     .attr("font-size","14px")   //字体大小
     .attr("text-anchor","middle")  //文本相对基点的位置
     .attr("x",function(d,i){   //设置文字的x坐标
      return padding.left+xScale(i)
     }) 
     .attr("y",function(d){    //设置文字的y坐标
      return height - padding.bottom - yScale(d)
     })
     .attr("dx",xScale.rangeBand()/2) //相对于当前位置在x方向上平移的距离  
     .attr("dy","2em")     //相对于当前位置在y方向上平移的距离
     .text(function(d){     //文字内容
      return d
     })
  //定义坐标轴
  //x轴
  var xAxis = d3.svg.axis()      //创建一个默认的新坐标轴      
     .scale(xScale)      //设定坐标轴的比例尺
     .orient("bottom")     //设定坐标轴的方向
  //重新设置y轴比例尺的值域，与原来的相反
  yScale.range([yAxisWidth,0])
  //y轴
  var yAxis = d3.svg.axis()      //创建一个默认的新坐标轴 
     .scale(yScale)      //设定坐标轴的比例尺
     .orient("left")      //设定坐标轴的方向
  //添加x轴和平移
  svg.append("g")         //在svg中添加一个包含坐标轴各元素的g元素
   .attr("class","axis")      //定义class名
   .attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")") //将x轴进行平移
   .call(xAxis)        //将自身作为参数传递给xAxis函数
  //添加y轴和平移
  svg.append("g")         //在svg中添加一个包含坐标轴各元素的g元素
   .attr("class","axis")      //定义class名
   .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth)+")") //将y轴进行平移
   .call(yAxis)        //将自身作为参数传递给yAxis函数
 }
 
 render() {
  return (
   <div id="body" >
   </div>
  );
 }
}
export default Bar;

总结

以上所述是小编给大家介绍的D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

- Author -

溢杨年华

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
关于javascript function对象那些迷惑分析
Oct 24 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
JSON在Javascript中的使用（eval和JSON.parse的区别）详细解析
Sep 05 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 #Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 #Javascript
详解es6新增数组方法简便了哪些操作
May 09 #Javascript
Vue函数式组件-你值得拥有
May 09 #Javascript
12个提高JavaScript技能的概念(小结)
May 09 #Javascript
Vue 处理表单input单行文本框的实例代码
May 09 #Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 #Javascript
存储过程(3) instantclient(1) Fragment(1) EventBus(1) B+树(2) 忘记密码(1) muduo(1) pt-archiver(1) TcpServer(1) ICF-5900W(2)
You might like
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php checkbox 取值详细说明
2010/08/19 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
利用python实现周期财务统计可视化
2019/08/25 Python
pytest中文文档之编写断言
2019/09/12 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
Pure Collection美国官网：来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
执行力心得体会
2013/12/31 职场文书
授权委托书格式模板
2014/04/03 职场文书
倡议书范文格式
2014/05/12 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏