D3.js实现柱状图的方法详解
D3.js介绍
D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。这里也可以看到它是用SVG来呈现图表的，所以使用D3.js是需要一定的SVG基础的。
如何用D3.js实现柱状图？
柱状图里面有坐标轴和柱子。然而我们还需要SVG画布来画这些东西。先把大概的画图框架搭起来，代码如下（请注意此时我在body标签里添加了D3.js的script标签。这样我们后面才能使用D3的方法）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱状图</title>
<style>
.container {
margin: 30px auto;
width: 600px;
height: 300px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<svg width="100%" height="100%"></svg>
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
<script>
window.onload = function() {
var width = 600, height = 300;
// SVG画布边缘与图表内容的距离
var padding = { top: 50, right: 50, bottom: 50, left: 50 };
// 创建一个分组用来组合要画的图表元素
var main = d3.select('.container svg').append('g')
// 给这个分组加上main类
.classed('main')
// 设置该分组的transform属性
.attr('transform', "translate(" + padding.top + ',' + padding.left + ')');
};
</script>
</body>
</html>
坐标轴的实现
为了把真实的数据与SVG画布上的坐标轴上的坐标联系起来，我们需要定义比例尺来描述这样的对应关系。D3中常用的比例尺有线性比例尺和序数比例尺，它们的区别如图所示：
从图上可以看出，线性比例尺的对应关系是连续的，而序数比例尺的对应关系是离散的。分析柱状图的展现意义可以得出x轴应该选用序数比例尺，而y轴选用线性比例尺。
// 模拟数据
var dataset = {
x: ["赵","钱","孙","李","周","吴","郑","王"],
y: [40, 30, 50, 70, 90, 20, 10, 40]
};
// 定义x轴的比例尺(序数比例尺)
var xScale = d3.scale.ordinal()
.domain(dataset.x)
.rangeRoundBands([0, width - padding.left - padding.right],0,0);
// 定义y轴的比例尺(线性比例尺)
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset.y)])
.range([height - padding.top - padding.bottom, 0]);
// 定义x轴和y轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left');
// 添加坐标轴元素
main.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + (height - padding.bottom - padding.top) + ')')
.call(xAxis);
main.append('g')
.attr('class', 'axis')
.call(yAxis);
我们模拟了一些数据，每个姓氏对应了一个数值（从这里也可以看出序数比例尺的定义域上的值不一定是连续关系）。d3.scale.ordinal()创建了一个序数比例尺，而ordinal.domain()设置了该比例尺的定义域，ordinal.rangRoundBands()设置了值域。同理，d3.scale.linear()创建了一个线性比例尺，linear.domain()定义定义域，linear.range()定义值域。接着，我们用d3.svg.axis()创建了两个坐标轴，把比例尺应用到它们上面，并且用axis.orient()设置了坐标轴的刻度尺的方向。最后，添加SVG元素，用call()把定义好的坐标轴与SVG元素联系起来。通过设置它们的transform属性来移动元素，使它们看起来像是一个坐标系。
这里需要注意以下几点：
1、ordinal.domain的参数是一个表示一系列值的数组，而linear.domain的参数是一个表示范围的数组。
2、比例尺的本质是一个函数，它接收定义域上的值来得出对应的值域上的值。
应用序数比例尺的坐标轴与线性比例尺的有很大不同，这里大概说明一下。
rangeRoundBands(interval, padding, outerPadding)中的padding和outerPadding都是可选的，默认为0。如上图所示的比例尺的代码是这样的。
var o = d3.scale.ordinal() .domain([0, 1, 2]) .rangeRoundBands([0, 100], 0.4, 0.1);
domain的参数数组有多少个元素，就会有多少个rangeBand，rangeBand之间的间隔为padding*step（padding取值范围为0到1），它与rangeBand的关系是均分一个step，比如padding为0.4，则rangeBand的长度为0.6*step。根据上述代码可得最终坐标轴的长度等于(0.1 + 2 + 0.6 + 0.1) * step，由此算出step的长度，再推出外间距、rangeBand、内间距的长度。而定义域上的取值刻度定位在每个rangeBand的中间。于是得到了示意图中的坐标轴（红色标注）。
我们接着来画柱状图，给坐标轴设置一下样式：
.axis path,
.axis line {
stroke: #000;
fill: none;
}
最终得到的柱状图的坐标轴如下图所示：
柱子的实现
柱子无非就是一个个矩形，在SVG中可以使用rect元素来画。先选择到main下所有bar类的元素（此时选择到的是一个空的集合），把dataset.y绑定到这个集合上，用enter()对比绑定的数组元素个数与集合中的SVG元素个数，与append()搭配使用，会自动补齐至两边个数相等。每一次的append都对应dataset.y中的一个数组元素。利用前面创建的比例尺函数计算出值并赋给举行元素的x、y属性。具体的代码如下：
// 矩形之间的间距
var rectMargin = 10;
// 添加矩形
main.selectAll('.bar')
.data(dataset.y)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', function(d, i) {
return xScale(dataset.x[i]) + rectMargin;
})
.attr('y', function(d, i) {
return yScale(d);
})
.attr('width', xScale.rangeBand() - 2*rectMargin)
.attr('height', function(d, i) {
return height - padding.top - padding.bottom - yScale(d);
})
.attr('fill', function(d, i) {
return getColor(i);
});
至此，得到了如下图所示的柱状图。
总结
以上就是利用D3.js实现柱状图的全部内容，感兴趣的朋友们可以自己动手实践下，这样更利于大家的理解和学习，希望这篇文章对大家的学习和工作能有所帮助。如果有疑问大家可以留言交流，谢谢大家对我们的支持，小编还会陆续更新关于D3.js的文章，请继续关注我们。
相关推荐
-
d3.js实现简单的网络拓扑图实例代码
前言 了解了D3.js的基本开发和组件以后,我们开始应用它激动人心之处:绚丽的预定义图形,应用D3.js,我们在它的示例文件的基础上稍加变动即可应用于我们的数据可视化工作中,D3.js将后台的运算已经预定义好,我们只需少量代码和规范的数据,就能做出很花哨(请原谅我的用词不当)的效果. 力学图(也称为导向图,也有叫网络拓补图的,反正就是通过排斥得到关系远近的结构)在社交网络研究.信息传播途径等群体关系研究中应用非常广泛,它可以直观地反映群体与群体之间联系的渠道.交集多少,群体内部成员的联系强度等.
-
JavaScript可视化图表库D3.js API中文参考
D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl
-
D3.js实现散点图和气泡图的方法详解
前言 小编之前已经跟大家分享过了<D3.js实现柱状图的方法详解>和<D3.js实现折线图的方法详解>这两篇文章,已经介绍过柱状图和折线图了.下面就来说说和这两种非常相似的图表--散点图和气泡图.有需要的朋友们可以参考学习. 散点图和气泡图的实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q
-
基于d3.js实现实时刷新的折线图
先来看看效果图 下面直接上源代码,html文件 <html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-seri
-
D3.js实现雷达图的方法详解
前言 再简单介绍下D3.js,D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 本文依然是先把简单的画图框架搭起来,添加SVG画布.这里和饼图有点类似,为了方便后面的绘制,我们把组合这些元素的g元素移动到画布的中心: <!DOC
-
D3.js实现折线图的方法详解
前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>
-
使用D3.js制作图表详解
D3是用于数据可视化的Javascript库.使用SVG,Canvas和HTML.结合强大的可视化技术和数据驱动的DOM操作方法. D3与JQuery的区别 D3是数据驱动的,JQuery不是:我们使用JQuery直接操纵元素:但是使用D3 时我们需要通过D3专有的data(),enter()和exit()方法提供数据和回调,然后D3操作元素. D3通常用于数据可视化:JQuery用于创建Web应用.D3有很多数据可视化扩展:JQuery有很多Web应用插件.两者都是Javascript DOM
-
D3.js实现直方图的方法详解
一.直方图简介 直方图就是一种照片的分析方式,横向代表亮度,纵向代表像素数量.首先分析出照片中所有像素的亮度,然后计算出具体数值,再把它们映射到横轴上.这样的话,越高,这个亮度上的像素就越多. 直方图的观看规则就是"左黑右白",左边代表暗部,右边代表亮部,而中间则代表中间调. 纵向上的高度代表像素密集程度,越高,代表的就是分布在这个亮度上的像素很多. 直方图用于描述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5,
-
D3.js实现饼状图的方法详解
前言 小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布.但是这里需要注意的是,为了方便后面画饼图上的弧形,我们把组合这些元素的g元素移动到画布的中心: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
-
D3.js实现柱状图的方法详解
D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 如何用D3.js实现柱状图? 柱状图里面有坐标轴和柱子.然而我们还需要SVG画布来画这些东西.先把大概的画图框架搭起来,代码如下(请注意此时我在body标签里添加
-
js控制台输出的方法(详解)
console.log(object[, object, ...]) 在控制台输出一条消息.如果有多个参数,输出时会用空格隔开这些参数. 第一个参数可以是一个包含格式化占位符输出的字符串,例如: console.log("The %s jumped over %d tall buildings", animal, count); 上面的例子可以用下面的无格式化占位符输出的代码替换: console.log("The", animal, "jumped ov
-
JS截取字符串的方法详解
substr() 方法 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符. stringObject.substr(start,length) start:必需.要抽取的子串的起始下标.必须是数值.如果是负数,那么该参数声明从字符串的尾部开始算起的位置. 也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推. length:可选.子串中的字符数.必须是数值.如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串. 记住:
-
WPF实现绘制统计图(柱状图)的方法详解
目录 前言 实现代码 效果预览 前言 有小伙伴提出需要实现统计图. 由于在WPF中没有现成的统计图控件,所以我们自己实现一个. PS:有更好的方式欢迎推荐. 实现代码 一.创建 BasicBarChart.cs 继承 Control代码如下. BasicBarChart.cs实现思路如下 1.SeriesArray :存放展示集合 . 2.重写OnRender . 3.先绘制X轴线. 4.调用GetFormattedText()绘制底部类别. 5.调用GetFormattedText()绘制左侧
-
node.js连接mongoose数据库方法详解
目录 创建项目命令 连接mongoose数据库 配置跨域 运行 创建项目命令 express --view ejs 项目名 进入项目,我们需要npm i 下载配置文件 有时候会出先端口已经被占用的情况,我们可以在bin目录下www文件中修改端口 连接mongoose数据库 我们创建一个新的文件夹,然后在文件夹下创建一个连接mongoose数据库的文件,代码如下 var mongoose=require('mongoose') mongoose.connect('mongodb://127.0.0
-
D3.js实现文本的换行详解
一.文字换行是什么问题? 现有一字符串: var str = "云中谁寄锦书来,雁字回时,月满西楼"; 李清照的一剪梅,读过吗? 在 body 里添加一个 svg 元素,大小如下: var width = 300; var height = 300; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",
-
d3.js入门教程之数据绑定详解
前言 d3.js 是一款上手容易的js类库,专门用于绘制svg图形图表,其关键理念为data-join 意即数据绑定.搞清这个概念非常重要,它将以简洁优雅的形式体现数据驱动编程. 以下是Thinking with Joins的拙译 ,原作者Mike Bostock 假设你要用D3画一副散点图,因此需要生成一些 SVG circle 元素来直观地展现数据. 你会惊讶地发现D3没有提供原生的产生多个DOM元素的接口, 是的,只有一个 append 方法,用于产生单个DOM元素: svg.append
-
node.js发送邮件email的方法详解
本文实例讲述了node.js发送邮件email的方法.分享给大家供大家参考,具体如下: 通常我们做node项目时,可能我们会碰到做一个简单的邮件反馈,那么我们今天就来讨论一下,其中遇到的各种坑. 总的来说做这个东西,我们可能需要node第三方依赖模块,来实现我们要达到的效果. 这里我推荐两个模块:https://github.com/pingfanren/Nodemailer npm install nodemailer //这个模块不错,github上星也比较多,还经常有维护,但是坑也比较多
-
JS访问DOM节点方法详解
本文实例讲述了JS访问DOM节点方法.分享给大家供大家参考,具体如下: 查找并访问节点 你可通过若干种方法来查找您希望操作的元素: 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素节点的 parentNode.firstChild 以及 lastChild 属性 getElementById() 和 getElementsByTagName() getElementById() 和 getElementsByTagName()