利用D3.js实现最简单的柱状图示例代码


Posted in Javascript onDecember 09, 2016

首先把效果图放出来:

利用D3.js实现最简单的柱状图示例代码

具备了一个柱状图的基础元素:柱形,坐标轴,刻度,数值等。

不得不说,d3.js比直接用的echarts更麻烦,但是确实更自由。

来看看如何实现吧。

//确定画布的大小
var width = 400;
var height = 400;
//在 body 里添加一个 SVG 画布 
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
//定义画布周围空白的地方
var padding = {left: 30, right: 30, top: 20, bottom: 20};
//定义一个数组
var dataset = [10, 20, 30, 40, 30, 20, 10, 5];
//x轴的比例尺
var xScale = d3.scale.ordinal()
  .domain(d3.range(dataset.length))
  .rangeRoundBands([0, width - padding.left - padding.right]);
//y轴的比例尺
var yScale = d3.scale.linear()
  .domain([0, d3.max(dataset)])
  .range([height - padding.top - padding.bottom, 0]);
//定义x轴
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom");
//定义y轴
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left");
//矩形之间的空白
var rectPadding = 4;
//添加矩形元素
var rects = svg.selectAll(".MyRect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("class", "MyRect")
  .attr("fill", "steelblue")
  .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  .attr("x", function (d, i) {
   return xScale(i) + rectPadding / 2;
  })
  .attr("y", function (d) {
   return yScale(d);
  })
  .attr("width", xScale.rangeBand() - rectPadding)
  .attr("height", function (d) {
   return height - padding.top - padding.bottom - yScale(d);
  });
//添加文字元素
var texts = svg.selectAll(".MyText")
  .data(dataset)
  .enter()
  .append("text")
  .attr("class", "MyText")
  .attr("fill", "white")
  .attr("text-anchor", "middle")
  .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  .attr("x", function (d, i) {
   return xScale(i) + rectPadding / 2;
  })
  .attr("y", function (d) {
   return yScale(d);
  })
  .attr("dx", function () {
   return (xScale.rangeBand() - rectPadding) / 2;
  })
  .attr("dy", function (d) {
   return 20;
  })
  .text(function (d) {
   return d;
  });
//添加x轴
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis);
//添加y轴
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
  .call(yAxis);

总结

好了,以上就是利用D3.js实现最简单柱状图的例子,怎么样?简单吧?希望本文的内容对刚学习d3.js的朋友们能有所帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
javascript动画算法实例分析
Jul 31 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 #Javascript
Angular.Js的自动化测试详解
Dec 09 #Javascript
浅析javascript中的Event事件
Dec 09 #Javascript
清除js缓存的多种方法总结
Dec 09 #Javascript
Vue.js计算属性computed与watch(5)
Dec 09 #Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 #Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 #Javascript
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php防止sql注入简单分析
2015/03/18 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
jQuery图片轮播的具体实现
2013/09/11 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
js实现随机点名
2021/01/19 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python aiohttp的使用详解
2019/06/20 Python
Pandas分组与排序的实现
2019/07/23 Python
详解Python 最短匹配模式
2020/07/29 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
矿泉水广告词
2014/03/20 职场文书
战略合作意向书范本
2014/04/01 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
死亡赔偿协议书
2015/01/28 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
使用scrapy实现增量式爬取方式
2022/06/21 Python