上一篇是曲线的绘制，这样仅仅只是有一条线，完全先是不出数据想要表现的内容，于是我们要添加坐标系，添加坐标系和画线类似。

　　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）--添加坐标轴和文本标签的更多相关文章

  1. 使用D3绘制图表（7）--饼状图

    这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...

  2. 使用D3绘制图表（2）--绘制曲线

    上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...

  3. D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

    坐标轴(Axis)   坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐 ...

  4. 使用D3绘制图表（4）--面积图表

    面积图表的绘制就是在曲线图表的基础上做一点小小的改动.其他的代码跟绘制曲线图表没有什么区别,下面有黄色背景颜色的代码就是修改的,是不是很简单,第一句修改的地方就是把之前绘制线的函数(line)改成了绘 ...

  5. 使用D3绘制图表（6）--竖直柱状图表

    竖直柱状图的绘制是在水平柱状图的基础上修改的. 1.html代码 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. 使用D3绘制图表（5）--水平柱状图表

    绘制水平柱状图表的方法也不是很难,首先在svg中插入g,然后在g中插入rect. 1.html代码 <!DOCTYPE html> <html> <head> &l ...

  7. 使用D3制作图表（1）--画布绘制

    使用D3绘制图表可以使数据更加直观. 使用D3前要先加载D3库,这里有两种方式,一种是在线加载<script type="text/javascript" src=" ...

  8. D3.js系列——比例尺和坐标轴

    比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...

  9. ZedGrap控件绘制图表曲线

    问题描述: 使用C#中ZedGrap控件绘制图表曲线图 ZedGrap 介绍说明:     安装ZedGrap控件 ZedGraph控件dll文件: 添加ZedGraph控件,首先在新建立的C#图像工 ...

随机推荐

  1. [麦先生]TP3.2之微信开发那点事[基础篇]（网页授权开发之小Demo）

    用户à 点击按钮进入授权页面并确认授权à 服务器返回code给开发者à 利用code,APPID,APPsecret组合数据请求API获取access_token和openidà 利用access_t ...

  2. MMORPG大型游戏设计与开发（客户端架构 part16 of vegine）

    由于近来比较忙碌和有些困倦的原因,所以关于这部分的文章没有及时更新,一句话:让朋友们久等了!今天所讲的是客户端vengine(微引擎)中最后一个部分,就像上节所说,这一部分的内容比较多.可能有些朋友看 ...

  3. POJ1651Multiplication Puzzle[区间DP]

    Multiplication Puzzle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8737   Accepted:  ...

  4. 通过Hander进行界面刷新

    Timer timer; TimerTask task; Handler handler;//先声明这3个变量 //在onCreate方法内 handler = new Handler(){ @Ove ...

  5. 由于启动用户实例的进程时出错，导致无法生成 SQL Server 的用户实例。该连接将关闭。

    错误:由于启动用户实例的进程时出错,导致无法生成SQL Server的用户实例. 原因:添加安装SQLEXPRESS时,估计装在了不同的目录下: 解决方法:关闭Sqlserver及相关的程序,删除目录 ...

  6. [No00005A]word多文档合一

    2个方法:法一,一个个插入,法二,一次性插入多个. 法一: 视图->大纲视图 点击 大纲 -> 显示文档 点击插入,逐个插入文档.. 最终 将视图调回页面视图..结束. 法二: 插入 - ...

  7. HTML 学习笔记(链接)

    HTML链接 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手. 我 ...

  8. charCode与keyCode的区别

    在标准浏览器下获取键盘按键我们可以使用e.which,但是非标准下没有这个属性,所以大部分情况下用keyCode,但是这是存在兼容性问题的.我们来看下他两的区别: onkeydown: e.keyCo ...

  9. Meet python: little notes 4 - high-level characteristics

    Source: http://www.liaoxuefeng.com/ ♥ Slice Obtaining elements within required range from list or tu ...

  10. 19个必须知道的Visual Studio快捷键（转）

    英文原文:19 Must-Know Visual Studio Keyboard Shortcuts 本文将为大家列出在 Visual Studio 中常用的快捷键,正确熟练地使用快捷键,将大大提高你 ...