【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题,先看下面的代码:
- <html>
- <head>
- <meta charset="utf-8">
- <title>HelloWorld</title>
- </head>
- <body>
- <p>Hello World 1</p>
- <p>Hello World 2</p>
- </body>
- </html>
如果你学习过HTML,应该知道会在屏幕中输出两行文字,如下图:
- <html>
- <head>
- <meta charset="utf-8">
- <title>HelloWorld</title>
- </head>
- <body>
- <p>Hello World 1</p>
- <p>Hello World 2</p>
- <script>
- var paragraphs = document.getElementsByTagName("p");
- for (var i = 0; i < paragraphs.length; i++) {
- var paragraph = paragraphs.item(i);
- paragraph.innerHTML = "I like dog.";
- }
- </script>
- </body>
- </html>
结果变为:
可以看到,使用Javascript,我们添加了4行代码,如果使用D3.js呢?只需添加一行代码即可。注意不要忘了引用d3.js源文件。
- <html>
- <head>
- <meta charset="utf-8">
- <title>HelloWorld</title>
- </head>
- <body>
- <p>Hello World 1</p>
- <p>Hello World 2</p>
- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
- <script>
- d3.select("body").selectAll("p").text("www.ourd3js.com");
- </script>
- </body>
- </html>
结果会变为:
与JQuery等javascript类似,能简化javascript的使用过程。
接下来改变字体的颜色和大小,如下:
- var p = d3.select("body").selectAll("p").text("www.ourd3js.com");
- p.style("color","red");
- p.style("font-size","72px");
可以看到上面的代码先给变量p赋值,再使用p。这样可以使代码更整洁。
来自:博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/。转载请注明出处,谢谢。
【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld的更多相关文章
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
- 【 D3.js 入门系列 --- 2.1 】 关于如何选择,插入,删除元素
在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...
- 【 D3.js 入门系列 --- 2.1 】 关于怎样选择,插入,删除元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 --- 0 】 简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
- 【 D3.js 入门系列 --- 0 】 简介及安装
家是我的个人博客: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...
随机推荐
- centos7 gitlab
yum -y update chmod +x /etc/rc.d/rc.local vi /etc/selinux/config SELINUX=disabled reboot vi /etc/hos ...
- 学习c++
慢慢的滑向无边无际的没有回头路的程序猿道路.坚持就是胜利. 致渣渣
- 简单SSM配置详解
SSM:spring+springMVC+Mybatis 学习网友的http://www.cnblogs.com/invban/p/5133257.html,并对其进行了详细的解说. 源码下载:htt ...
- 学习mongo系列(七)aggregate() ,$group() 管道
aggregate()聚合,主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果.有点类似sql语句中的 count(*) 接上边的数据库: > db.user.aggregate ...
- redis 库相关命令
切换数据库: select 1 查看数据库大小:dbsize 清空数据库: flushdb
- Java面向对象三大特点之封装
封装 含义:将对象的属性和行为封装起来,而将对象的属性和行为封装起来的载体是类,类通常对客户隐藏其实现细节,这就是封装的思想.封装最主要的功能在于我们能修改自己的实现代码,而不用修改那些调用我们代码的 ...
- springmvc的单文件上传
@RequestMapping("/up") public ModelAndView up(MultipartFile myfiles , HttpServletRequest r ...
- spring4+mybatis3+maven
简介 在上一篇博文中,我们搭建了maven环境,现在我们就用maven搭个ssm框架,废话不多说,直接开始吧 代码下载地址 链接:http://pan.baidu.com/s/1nvg42EH 密码: ...
- Linux编程之驱动
增加自己写的驱动程序:http://blog.chinaunix.net/uid-23065002-id-115739.html http://os.51cto.com/art/201108/2840 ...
- AS3绘制扇形算法解析
网上有很多使用AS3画一个扇形的方法,但是却一个都没有解释这个函数是如何运作来画出扇形的,下面浅谈下我对这个函数的理解. 首先上代码,代码来自http://blog.csdn.net/weiming8 ...