首页
所有分类
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 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 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
短信验证码(1) TextInputLayout(1) Tsmoothie(1) 分布式锁(3) SQLite3(1) Selenium(1) reduce(2) filter(1) Django(9) dockerfile(1)
You might like
Win2003服务器安全加固设置－-进一步提高服务器安全性
2007/05/23 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
10 个经典PHP函数
2013/10/17 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
莫斯科隐形眼镜网上商店：Linzi
2019/07/22 全球购物
类和结构的区别
2012/08/15 面试题
甜点店创业计划书
2014/01/27 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
班委竞选演讲稿
2014/04/28 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
经理岗位职责范本
2015/04/15 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
Redis 异步机制
2022/05/15 Redis