利用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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
详解ES6 系列之异步处理实战
Oct 26 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
php 调用远程url的六种方法小结
2009/11/02 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python标识符命名规范原理解析
2020/01/10 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
给小学生的新年寄语
2014/04/04 职场文书
花坛标语大全
2014/06/30 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
毕业生个人总结
2015/02/28 职场文书
党员自我评价范文2015
2015/03/03 职场文书
公司业务员管理制度
2015/08/05 职场文书
《所见》教学反思
2016/02/23 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android