使用D3绘制图表可以使数据更加直观。

　　使用D3前要先加载D3库，这里有两种方式，一种是在线加载<script type="text/javascript" src="http://d3js.org/d3.v3.js" ></script>,另一种是下载D3库，我是直接在百度里面搜索”D3 js 下载“然后下载的，下载后放入项目中，然后引入到html页面里面就可以了。这里声明一下，大部分时候我们都把引入js文件的语句放在页面的最下面，这是因为js中的一些方法要使用html里面的一些内容，把js文件的引入放在最后面就不会出错。

　　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样式

#container {

    width: 500px;

    height: 250px;

    background-color: #ccc;

    margin: 0 auto;

    margin-top: 100px;

}

　　3.index.js代码（画布的绘制在这里面完成，这里使用了D3库，所以这个js文件的引入在d3下面）

//获取div，向里面添加svg

var svg = d3.select("#container")

.append("svg:svg")//在“container”中插入svg

.attr("width", 500)//设置svg的宽度

.attr("height", 250)//设置svg的高度

//添加g元素

d3.select("svg")//使用“select”函数选择svg

.append("g")//在svg中插入g

.attr("transform","translate(50,25)")//设置g的偏移量

上面是在开发者模式下的截图，我们可以看到svg和g都被添加到了div里面，这样画布的绘制就完成了。大家在学习和练习是要多使用浏览器的开发者模式，这样很方便修改。

使用D3制作图表（1）--画布绘制的更多相关文章

  1. 13个JavaScript图表（JS图表）图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  2. 13个JavaScript图表（JS图表）图形绘制插件

    转自:http://blog.jobbole.com/13671/ 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力 ...

  3. 【转】13个JavaScript图表（JS图表）图形绘制插件

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  4. Excel中用REPT函数制作图表

    本文从以下七个方面,阐述在Excel中用REPT函数制作图表: 一. 图形效果展示 二. REPT语法解释 三. REPT制作条形图 四. REPT制作漏斗图 五. REPT制作蝴蝶图 六. REPT ...

  5. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. Ember Charts – 基于 Ember & D3 的图表库

    Ember Charts 是一个基于 Ember.js 和 D3.js 的图表库.它包括时间序列.柱状图.饼图.点图,很容易扩展和修改.这些图表组件代表图表交互性和演示的最佳实践,是高度可定制和可扩展 ...

  7. 使用Open Flash Chart(OFC)制作图表(Struts2处理)

    Java开源项目中制作图表比较出色的就是JFreeChart了,相信大家都听说过,它不仅可以做出非常漂亮的柱状图,饼状图,折线图基本图形之外,还能制作甘特图,仪表盘等图表.在Web应用中可以为项目增色 ...

  8. D3制作基础图表学习总结(part1)

    一.基本的环境搭建(和使用其他框架或js库一样) 1.建立一个工程: 2.在html文件中引入D3的文件: 附上git地址:https://github.com/d3/d3/wiki  二.建立图表 ...

  9. 【译】用 React 和 D3 创建图表

    本文翻译自:https://dzone.com/articles/charts-with-modern-react-and-d3 本文将介绍如何利用 D3JS 和 ReactJS 来创建基础图表. R ...

随机推荐

  1. 汽车4S店经验指标完成情况报表制作分享

    集团公司一般为了加强下属的经营管理,以及项经营指标完情况,需要制定一些报表.我们平时也经常遇到这种情况,而这些报表要包括什么内容呢?该怎么制作呢?用什么制作呢?今天小编就以4s店为例,分享给大家一个报 ...

  2. RCC BUCK变压器设计

    RCC电路工作于临界模式,不是固定工作频率,其设计遵从BUCK原理.Buck电路在最高输入电压时为电感最恶劣工作条件: 以下图为例: 1.首先设定如下参数:输入电压Vin,输出电压Iout,工作频率f ...

  3. web测试方法

    首先互联网B/S系统一般分为三层,即表示层.业务逻辑层.数据层,下面是我整理的关于web的测试方法. 表示层 一.功能测试 1.链接测试 确认每个链接有效且正确跳转 2.表单测试 确认表单能正常提交, ...

  4. Eclipse自动打开实现类原型的工具

    http://eclipse-tools.sourceforge.net/implementors/ I always use this implementors plugin to find all ...

  5. JQuery学习

    首先要明白一点,JQuery是一个JS的封装库,目的是为了关注点分离,让前端更加侧重于界面显示,而不是各个浏览器不同的差异性,下面是JQuery的一些常用的基本用法 一,JQuery语法 window ...

  6. js,onblur后下一个控件获取焦点判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval

    需求: input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误.但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显 ...

  7. 窗口 - dialog - 概述与基本使用

    什么是dialog 对话框是一种特殊的窗口,它在顶部有一个工具栏,在底部有一个按钮栏.默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具. 用户可以配置对话框行为来显示其他工具(比如: ...

  8. quartz.net 项目无法加载的问题

    最近尝试试用一下quartz.net 做任务调度用. 下载了源代码后打开解决方案发现项目无法加载.错误如下 未找到导入的项目“C:\Users\****\Desktop\Quartz.NET-2.1. ...

  9. 用C++11的std::async代替线程的创建

    c++11中增加了线程,使得我们可以非常方便的创建线程,它的基本用法是这样的: void f(int n); std::thread t(f, n + 1); t.join(); 但是线程毕竟是属于比 ...

  10. QT 数据库编程二

    //logindlg.cpp #include "logindlg.h" #include <QGridLayout> #include <QHBoxLayout ...