上一篇是使用D3绘制画布，这一篇的内容是在画布上绘制曲线。

　　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样式添加了path的样式

#container {

    width: 500px;

    height: 250px;

    background-color: #ccc;

    margin: 0 auto;

    margin-top: 100px;

}

path{

    fill: none;

    stroke: cornflowerblue;

    stroke-width: 2px;

}

　　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 = [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([0, g_height])

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))

这些都是我在慕课网上边学编写的文章，没什么基础的同学也可以去慕课网上看看，还是蛮不错的一个网站，可以边学边练习。

使用D3绘制图表（2）--绘制曲线的更多相关文章

  1. ApacheBench 测试性能并使用 GnuPlot 绘制图表

    转自:http://blog.csdn.net/fdipzone/article/details/18827069 ApacheBench 测试性能并使用 GnuPlot 绘制图表 Apache Be ...

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

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

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

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

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

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

  5. ZedGrap控件绘制图表曲线

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

  6. iOS:使用贝塞尔曲线绘制图表（折线图、柱状图、饼状图）

    1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...

  7. D3力布图绘制--节点跑掉，单曲线弯曲问题记录

    D3力布图绘制中遇到的交互问题,频繁操作数据后,会出现节点跑掉和单曲线弯曲的问题 问题描述 在id指向都正常的情况下出现以下2种状况: 单曲线弯曲 节点跑掉 经排查,是数据重复导致的问题 线条也是一样 ...

  8. 10 个超炫绘制图表图形的 Javascript 插件【转载+整理】

    原文地址 现在,有很多在线绘制图表和图形(Charts and Graphs)的 JavaScript 插件,这些插件还都是免费,以及图表库.这些插件大量出现的原因是基于一个事实:人们不再依赖于 Fl ...

  9. DevExpress使用之ChartControl控件绘制图表（多坐标折线图、柱状图、饼状图）

    最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...

  10. iOS - Quartz 2D 第三方框架 Charts 绘制图表

    1.Charts 简介 使用第三方框架 Charts 绘制 iOS 图表.GitHub 源码 Charts Charts 是一款用于绘制图表的框架,可以绘制柱状图.折线图.K线图.饼状图等.Chart ...

随机推荐

  1. webapp尺寸

    一.viewport宽度 起源:PC端的网站要显示在移动端有什么问题? 如果把移动端的可是区域设置到(320-768)的话,大部分网站都会因为太窄而显示错乱 所以浏览器默认把viewport[这个vi ...

  2. [麦先生]Laravel框架实现发送短信验证

    今天在做到用户注册和个人中心的安全管理时,我借助实现第三方短信平台在Laravel框架中进行手机验证的设置;  由于我们做的是一个为客户提供医疗咨询和保健品网站,所以对客户个人隐私的保护显得尤为重要, ...

  3. zookeeper Eclipse 开发环境搭建及简单示例

    一,下载Zookeeper安装包 从官方网站下载稳定版安装包后,解压. 其中ZK_HOME 为:D:\Program Files\zookeeper-3.4.9 二,启动Zookeeper Serve ...

  4. 嵌入式Linux驱动学习之路(十)字符设备驱动-my_led

    首先贴上代码: 字符设备驱动代码: /** *file name: led.c */#include <linux/sched.h> #include <linux/signal.h ...

  5. java中使用二重循环打印图形

    如图所示:打印沙漏图形 1:因为外层循环控制图形行数,所以首先判断这四个选项能否循环五次 2:以上四个循环的表达式都能循环五次,我们从内层循环入手. A:int i=0;i<5;i++ 当i=1 ...

  6. SOAP-XML请求(iOS应用下集成携程api)

    用携程机票为例: 携程联盟 飞机票.门票 联盟ID:278639 站点ID:739462 密钥KEY:BE57B925-E8CE-4AA2-AC8E-3EE4BBBB686F API_URL:open ...

  7. 画图解释 SQL join 语句

    转:http://blog.jobbole.com/40443/ 本文由 伯乐在线 - 奇风余谷 翻译.未经许可,禁止转载!英文出处:Jeff Atwood.欢迎加入翻译组. 我认为 Ligaya T ...

  8. Oracle 多表update

    今天凌晨因为要在数据库里做一些操作,是关于两表关联的update,但语句怎么写都不正确,老是报错,于是心惊肉跳(就怕不能及时完成操作)去查了一下,NND,原来把SQL写成了在SQL Server下面的 ...

  9. linux系统下对网站实施负载均衡+高可用集群需要考虑的几点

    随着linux系统的成熟和广泛普及,linux运维技术越来越受到企业的关注和追捧.在一些中小企业,尤其是牵涉到电子商务和电子广告类的网站,通常会要求作负载均衡和高可用的Linux集群方案. 那么如何实 ...

  10. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...