首页
所有分类
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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
《javascript设计模式》学习笔记五：Javascript面向对象程序设计工厂模式实例分析
Apr 08 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
俄罗斯购物网站(137) 台湾购物网站(77) 澳大利亚购物网站(309) 埃及购物网站(2) 墨西哥购物网站(16) 印尼购物网站(37) 意大利购物网站(128) 丹麦购物网站(22) 马来西亚购物网站(41) 法国购物网站(144)
You might like
提问的智慧(2)
2006/10/09 PHP
php SQL之where语句生成器
2009/03/24 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
yii2.0框架数据库操作简单示例【添加，修改，删除，查询，打印等】
2020/04/13 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
用Python编写简单的微博爬虫
2016/03/04 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
python 产生token及token验证的方法
2018/12/26 Python
python实现复制大量文件功能
2019/08/31 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
英国女性时尚精品店：THE DRESSING ROOM
2018/05/23 全球购物
意大利在线药房：Saninforma
2021/02/11 全球购物
＂引用＂与多态的关系
2013/02/01 面试题
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
应届毕业生简历自我评价
2014/01/31 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
聊聊JS ES6中的解构
2021/04/29 Javascript
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技