下面开始用D3.js处理第一个简单问题，先看下面的代码：

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>HelloWorld</title>
  5. </head>
  6. <body>
  7. <p>Hello World 1</p>
  8. <p>Hello World 2</p>
  9. </body>
  10. </html>

如果你学习过HTML，应该知道会在屏幕中输出两行文字，如下图：

         
 
   如果想用JavaScript来更改这两行文字，怎么办？我们会添加代码变为：
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>HelloWorld</title>
  5. </head>
  6. <body>
  7. <p>Hello World 1</p>
  8. <p>Hello World 2</p>
  9. <script>
  10. var paragraphs = document.getElementsByTagName("p");
  11. for (var i = 0; i < paragraphs.length; i++) {
  12. var paragraph = paragraphs.item(i);
  13. paragraph.innerHTML = "I like dog.";
  14. }
  15. </script>
  16. </body>
  17. </html>

结果变为： 
    

可以看到，使用Javascript，我们添加了4行代码，如果使用D3.js呢？只需添加一行代码即可。注意不要忘了引用d3.js源文件。

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>HelloWorld</title>
  5. </head>
  6. <body>
  7. <p>Hello World 1</p>
  8. <p>Hello World 2</p>
  9. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  10. <script>
  11. d3.select("body").selectAll("p").text("www.ourd3js.com");
  12. </script>
  13. </body>
  14. </html>

结果会变为: 
   

与JQuery等javascript类似，能简化javascript的使用过程。

接下来改变字体的颜色和大小，如下：

  1. var p = d3.select("body").selectAll("p").text("www.ourd3js.com");
  2. p.style("color","red");
  3. p.style("font-size","72px");

可以看到上面的代码先给变量p赋值，再使用p。这样可以使代码更整洁。

来自：博客首页为： http://www.ourd3js.com/  ，csdn博客首页为：http://blog.csdn.net/lzhlzz/。转载请注明出处，谢谢。

【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld的更多相关文章

  1. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  2. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  3. 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

  4. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  5. 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  6. 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...

  7. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  8. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  9. 【 D3.js 入门系列 --- 0 】 简介及安装

    家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

随机推荐

  1. Web服务器amp搭建

  2. 11.安装KVM虚拟机

    安装KVM虚拟机是一大难题,不按照虚拟机物理机128G内存和强劲的CPU无法充分利用.也不便于后面的jenkins自动部署.安装KVM虚拟机过程我是借鉴了网上下载的马哥linux   KVM那块的内容 ...

  3. Windows Internals学习笔记（六）Windows关键系统组件

    参考资料: 1. <Windows Internals> 2. Dependency Walker 3. Ntoskrnl.exe 4. Livekd的使用 5. WinDbg的使用(一) ...

  4. 【树莓派】使用树莓派制作img镜像（一）

    最近一直在折腾树莓派,前几天装了10台设备,最近又来了15台开发板子.基本每台设备都需要进行如下操作: 1.安装树莓派OS,并配置键盘.时区.语言编码格式等: 2.新增组.用户.配置静态IP地址: 3 ...

  5. 【转】IP分片和TCP分段

    ZC: 由于 TCP中 MSS 的关系,TCP 不会造成 IP分片和TCP分段 ! 1.http://zhidao.baidu.com/link?url=YCnR8B-1EN4-cgauRtwa-iV ...

  6. supervisor安装和配置

    直接命令 easy_install supervisor 如果报错先安装 yum install python-setuptools,再上面一条命令: 安装成功后显示finished,我们再次进行py ...

  7. == 区别 equals

    ==操作符专门用来比较值是否相等 int a=10; int b=10; 则 a==b, 返回 true. 但是, String a = new String("foo"); St ...

  8. openfire源码修改聊天消息发送内容

    /** * $RCSfile: MessageRouter.java,v $ * $Revision: 3007 $ * $Date: 2005-10-31 13:29:25 -0300 (Mon, ...

  9. nginx虚拟主机配置

    nginx虚拟主机配置   虚拟主机的概念虚拟主机,就是把一台物理服务器划分成多个"虚拟"的服务器,每一个虚拟主机都可以有独立的域名和独立的目录nginx虚拟主机的配置nginx的 ...

  10. js 过滤script

    function stripscript(s) {      return s.replace(/<script.*?>.*?<\/script>/ig, '');  } 稍微 ...