【 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 ...
随机推荐
- <hr/> 水平线样式
<hr style="width:490px;" /> <hr size=8 style="COLOR: #ffd306;border-style:ou ...
- shockt通信
目前为止,我们使用的最多网络协议还是tcp/ip网络.通常来说,我们习惯上称为tcp/ip协议栈.至于协议栈分成几层,有两种说法.一种是五层,一种是七层. 5.应用层 4.传输层 3.网络 ...
- window svn链接
我学会怎么建立window SVN服务器了 今天,终于学会怎么自己搭建SVN服务了,以前一直用的都是公司的SVN服务,没接触过,觉得很神秘,曾经我一个同事弄了好几天,也没搭成,对我打击挺大的:( 觉得 ...
- Mac 在命令行中获得Root权限
Mac 在命令行中获得Root权限 作者 firedragonpzy 13 九月, 2012 2条评论 本文为firedragonpzy原创,转载务必在明显处注明:转载自[Softeware MyZo ...
- Redis设计思路学习与总结
版权声明:本文由宋增宽原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/222 来源:腾云阁 https://www.qclo ...
- 通过 Informix 系统表监控和优化数据库
Informix 数据库系统字典表简介 Informix 数据库服务器运行时的状态信息是数据库管理员 DBA 进行系统监控和优化的必需信息来源.Informix 的状态信息在内部以 2 种方式存在,如 ...
- Gradient Boost Decision Tree（GBDT）中损失函数为什么是对数形式
由于最近要经常用到XGBOOST的包,不免对相关的GBDT的原理又重新学习了一遍, 发现其中在考虑损失函数的时候,是以对数log进行度量的,囿于误差平方和函数的印象 那么为什么是对数呢?可能是下面的原 ...
- [Android] Web Console: Uncaught TypeError: Object [object Object] has no method 'xxx'
我们开发的产品,有一部分功能,需要在WebView中打开web页面,然后在web页面中通过js方法回调部分native的功能. 对于web回调native的开发方式,如果不了解的话,可以参考我以前的一 ...
- 第三节 构造一个简单的Linux系统MenuOS——20135203齐岳
第三节 构造一个简单的Linux系统MenuOS By 20135203齐岳 Linux内核源代码 arch/ 支持不同cpu的源代码 Documentations/ 文档存储 init/ 内核启动相 ...
- DataTable 导到Excel
/// <summary> /// 将DataTalbe导出到Excel中 /// </summary> /// <param name="dt"&g ...