使用D3绘制图表(3)--添加坐标轴和文本标签
上一篇是曲线的绘制,这样仅仅只是有一条线,完全先是不出数据想要表现的内容,于是我们要添加坐标系,添加坐标系和画线类似。
1.还是没有变化的html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="js/d3.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</html>
2.改变后的css样式文件,主要是domain和tick样式的添加
#container {
width: 500px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
margin-top: 100px;
} path{
fill: none;
stroke: cornflowerblue;
stroke-width: 2px;
} .domain,.tick line {
stroke: gray;
stroke-width: 1px;
}
3.完成功能的js代码
var width = 500, height = 250, margin = {left:50, top:30, right:20,bottom:20},
g_width = width - margin.left - margin.right,
g_height = height - margin.top - margin.bottom; //获取div,向里面添加svg
var svg = d3.select("#container")
.append("svg:svg")//在“container”中插入svg
.attr("width", width)//设置svg的宽度
.attr("height", height)//设置svg的高度 //添加g元素
var g = d3.select("svg")
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")") var data = [0,1,3,5,9,4,2,3,6,8]//定义一个数组,里面放置了一些任意数字
var scale_x = d3.scale.linear()//把曲线沿x轴按比例放大
.domain([0, data.length-1])
.range([0, g_width])
var scale_y = d3.scale.linear()//把曲线沿y轴按比例放大
.domain([0, d3.max(data)])
.range([g_height,0])//使y轴按照数学中的方式显示,而不是浏览器的格式 var line_generator = d3.svg.line()//d3中绘制曲线的函数
.x(function(d, i){return scale_x(i);})//曲线中x的值
.y(function(d){return scale_y(d);})//曲线中y的值
.interpolate("cardinal")//把曲线设置光滑 d3.select("g")
.append("path")
.attr("d", line_generator(data)) var x_axis = d3.svg.axis().scale(scale_x),
y_axis = d3.svg.axis().scale(scale_y).orient("left") g.append("g")
.call(x_axis)
.attr("transform","translate(0,"+g_height+")") g.append("g")
.call(y_axis)
.append("text")
.text("price(¥)")
.attr("transform","rotate(-90)")//text旋转-90°
.attr("text-anchor","end")//字体尾部对齐
.attr("dy","1em")//沿y轴平移一个字体的大小
4.完成后的样式
使用D3绘制图表(3)--添加坐标轴和文本标签的更多相关文章
- 使用D3绘制图表(7)--饼状图
这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...
- 使用D3绘制图表(2)--绘制曲线
上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...
- D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)
坐标轴(Axis) 坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐 ...
- 使用D3绘制图表(4)--面积图表
面积图表的绘制就是在曲线图表的基础上做一点小小的改动.其他的代码跟绘制曲线图表没有什么区别,下面有黄色背景颜色的代码就是修改的,是不是很简单,第一句修改的地方就是把之前绘制线的函数(line)改成了绘 ...
- 使用D3绘制图表(6)--竖直柱状图表
竖直柱状图的绘制是在水平柱状图的基础上修改的. 1.html代码 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 使用D3绘制图表(5)--水平柱状图表
绘制水平柱状图表的方法也不是很难,首先在svg中插入g,然后在g中插入rect. 1.html代码 <!DOCTYPE html> <html> <head> &l ...
- 使用D3制作图表(1)--画布绘制
使用D3绘制图表可以使数据更加直观. 使用D3前要先加载D3库,这里有两种方式,一种是在线加载<script type="text/javascript" src=" ...
- D3.js系列——比例尺和坐标轴
比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...
- ZedGrap控件绘制图表曲线
问题描述: 使用C#中ZedGrap控件绘制图表曲线图 ZedGrap 介绍说明: 安装ZedGrap控件 ZedGraph控件dll文件: 添加ZedGraph控件,首先在新建立的C#图像工 ...
随机推荐
- css多栏自适应布局
css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...
- hdu-5493 Queue(二分+树状数组)
题目链接: Queue Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- Putty文件夹蓝色太暗问题
Putty文件夹蓝色太暗问题 用Putty通过ssh登陆Linux服务器时,有时候会发现系统默认的蓝色字体太暗,具体解决方法如下: (1)打开putty客户端,选择某登陆Session,然后load: ...
- Windows 批处理(bat)语法大全
本文是学习bat整理的笔记,由于内容较多,建议结合右侧文章大纲查看. %~dp0[获取当前路径] %~dp0 “d”为Drive的缩写,即为驱动器,磁盘.“p”为Path缩写,即为路径,目录 cd % ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- S2总结笔记
第一章:深入.NET框架 1..NET FrameWork两大组件是什么? 解析:.NET 框架类库(FCL:FrameWork Class Library)和公共语言运行时(CLR:common l ...
- Maven 常用命令, 备忘
Maven在现在的Java项目中有非常重要的地位, Maven已经不是Ant这样仅仅用于构建, 首先, 它是一个构建工具, 把源代码编译并打包成可发布应用的构件工具其次, 它是一个依赖管理工具, 集中 ...
- Javascript 代码格式化(JsFormat)
JsFormat 在GitHub 上的地址: https://github.com/jdc0589/JsFormat 这是一个sublime text 2 的插件. 安装: 先安装 sublime p ...
- myeclipse 8.5离线安装python插件
看到网上很多教程扯了一大堆,好麻烦的样子. 1)下载pyhon开发插件,PyDev 2.2.0.zip 我在百度137708820网盘里已分享,链接http://pan.baidu.com/s/1mg ...
- SQL Server存储过程中使用表值作为输入参数示例
这篇文章主要介绍了SQL Server存储过程中使用表值作为输入参数示例,使用表值参数,可以不必创建临时表或许多参数,即可向 Transact-SQL 语句或例程(如存储过程或函数)发送多行数据,这样 ...