首页
所有分类
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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
使用JS进行目录上传（相当于批量上传）
Dec 05 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
JavaScript高级程序设计阅读笔记（六） ECMAScript中的运算符（二）
Feb 27 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
为什么要使用Vuex的介绍
Jan 19 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
Lifecycle(1) PostMapping(1) Spring(9) Xception(1) 内存泄露(1) 温控(1) ResNet50(1) 微信(2) tensorflow(2) 小喇叭开始广播了(1)
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
用 PHP5 轻松解析 XML
2006/12/04 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
PHP最常用的正则表达式
2017/02/13 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
基于jquery的一个OutlookBar类，动态创建导航条
2010/11/19 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
JS实现图片切换效果
2018/11/17 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
python实现实时监控文件的方法
2016/08/26 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
在python3中实现更新界面
2020/02/21 Python
python numpy库np.percentile用法说明
2020/06/08 Python
运动鞋、足球鞋和慕尼黑球衣：Sport Münzinger
2019/08/26 全球购物
英国时尚配饰、珠宝和服装网站：KJ Beckett
2020/01/23 全球购物
澳大利亚最早和最古老的巨型游戏专家：Yardgames
2020/02/20 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
优秀教师主要事迹
2014/02/01 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
中学生运动会广播稿
2015/08/19 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js