---文章转自 http://d3.decembercafe.org/index.html  ,Created by 十二月咖啡馆。

  一个完整的柱形图包含三部分:矩形、文字、坐标轴。

  

  首先要布置一个大小合适的 SVG 画布:

  • 添加 SVG 画布

    

//画布大小
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};

  上面定义了一个 padding,是为了给 SVG 的周边留一个空白,最好不要将图形绘制到边界上。

  • 定义数据和比例尺  

//定义一个数组
var dataset = [10, 20, 30, 40, 33, 24, 12, 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 轴使用序数比例尺,y 轴使用线性比例尺。要注意两个比例尺值域的范围。

  • 定义坐标轴

//定义x轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom"); //定义y轴
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");

  x 轴刻度的方向向下,y 轴的向左。

  • 添加矩形和文字元素 

//矩形之间的空白
var rectPadding = 4; //添加矩形元素
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.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("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 和 y 坐标要特别注意,要结合比例尺给予适当的值。

  • 添加坐标轴的元素  

//添加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);

  坐标轴的位置要结合空白 padding 的值来设定。

  

D3---01基础的柱状图制作(转)的更多相关文章

  1. Java 之 I/O 系列 01 ——基础

    Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 整理<疯狂j ...

  2. linux 01 基础命令

    linux 01 基础命令 对于Linux要记住一个概念,一切皆文件,哪怕是目录,也是一个文件 1.修改用户密码 sudo passwd pyvip@Vip:~$ #pyvip表示用户名, Vip表示 ...

  3. 软件设计之基于Java的连连看小游戏(二)——游戏基础界面的制作及事件的添加

    上次完成到游戏首页的制作,今天完成了游戏基础界面的制作以及事件的简单添加.由于功能尚未完全实现,因此游戏界面的菜单列表只是简单地添加了一下,其余菜单列表以及倒计时等在后续的制作中逐一完善. 1.首先在 ...

  4. 01.基础架构:一条SQL查询语句是如何执行的?学习记录

    01.基础架构:一条SQL查询语句是如何执行的?学习记录http://naotu.baidu.com/file/1c8fb5a0f2497c3a2655fed89099cb96?token=ff25d ...

  5. 《零基础学习Python制作ArcGIS自定义工具》课程简介

    Python for ArcGIS Python for ArcGIS是借助Python语言实现ArcGIS自动化行为的综合,它不止是如课程标题所述的“制作ArcGIS自定义工具”,还包括使用Pyth ...

  6. 01 基础版web框架

    01 基础版web框架 服务器server端python程序(基础版): import socket server=socket.socket() server.bind(("127.0.0 ...

  7. PHP学习笔记01——基础语法

    <!DOCTYPE html> <html> <?php // 1.使用$加变量名来表示变量,php是弱类型语言,不要求在使用变量前声明,第一次赋值时变量才被创建 $a ...

  8. 一步步Cobol 400 上手自学入门教程01 - 基础概念

    先学习基础概念 1.COBOL字符:包含: User-defined words 用户定义字符 ŸSystem-names ŸReserved words 关键字 2.用户定义字符User-defin ...

  9. Spring 01基础

    一.Spring作用:管理项目中各种业务Bean(service类.Dao类.Action类),实例化类,属性赋值 二.Spring IOC(Inversion of Control )控制反转,也被 ...

随机推荐

  1. JGUI源码:实现简单MVVM单项绑定学习笔记(15)

    前面几节都是jquery界面方面的东西,本节研究些数据方面的东西:MVVM. MVVM由三部分组成:Model <=> ViewModel <=> View,当Model数据改 ...

  2. [Reinforcement Learning] Value Function Approximation

    为什么需要值函数近似? 之前我们提到过各种计算值函数的方法,比如对于 MDP 已知的问题可以使用 Bellman 期望方程求得值函数:对于 MDP 未知的情况,可以通过 MC 以及 TD 方法来获得值 ...

  3. Python——爬取人口迁徙数据(以腾讯迁徙为例)

    说明: 1.迁徙量是腾讯修改后的数值,无法确认真实性. 2.代码运行期间,腾讯迁徙未设置IP屏蔽和浏览器检测,因此下段代码仅能保证发布近期有效. 3.代码功能:爬取指定一天的四十(此四十是根据自己的城 ...

  4. oi回忆录

    堆在一起写成流水账好了,算是记录一下自己的oi历程.  [伊始] 一直到高中以前,我从来没有接触过任何oi相关的东西. 直到初三的那个暑假,在去金中报名的时候,报名表上面有一栏要填暑假想参加的夏令营. ...

  5. windows bat 批处理 执行 for 循环无法执行?

    示例:   cmd 命令行可以执行.但是 写成 bat 却不能执行, for /f "delims==" %a in ('dir /b /s F:\F\*.TXT')do copy ...

  6. idea2017.2.2注册

    IntelliJ IDEA 2017.2 破解(注册) 2017年08月10日 11:13:45 筱进GG 阅读数:2849更多 个人分类: IntelliJ IDEA   下载IntelliJ ID ...

  7. [转]在static代码块或static变量的初始化过程中使用ServiceManager提供的api的陷阱

    一. 案例 1.源码: /** @hide */ private TelephonyManager(int slotId) { mContext = null; mSlotId = slotId; i ...

  8. [mysql] 修复问题表Table '.xxxx' is marked as crashed and should be repaired

    程序执行的过程中,出现   Table '.xxxx' is marked as crashed and should be repaired 错误,上网查了一下,原来是表遭到损坏所致,具体修复办法如 ...

  9. 【MySQL】MySQL内连接,左连接,右连接查询

    概念 INNER JOIN(内连接):获取两个表中字段匹配关系的记录.也就是只会返回共有的内容. LEFT JOIN(左连接):获取左表所有记录,即使右表没有对应匹配的记录. RIGHT JOIN(右 ...

  10. 算法工程师<深度学习基础>

    <深度学习基础> 卷积神经网络,循环神经网络,LSTM与GRU,梯度消失与梯度爆炸,激活函数,防止过拟合的方法,dropout,batch normalization,各类经典的网络结构, ...