D3.js是一种数据操作类型的javascript库（也可视其为插件）；结合HTML,SVG和CSS，D3可以图形化的，生动的展现数据。

d3获取：http://d3js.org/

在代码文件中引入D3：

<script type="text/javascript" src="d3.v3/d3.v3.js"></script>

添加元素语法：

d3.select("body").append("p").text("New paragraph!");

说明：选择body标签，为之添加一个p标签，并设置它的内容为New paragraph！

你可以将链接选择换行，这样代码结构更清晰：

  1.  d3.select("body")
  2.       .append("p")
  3.       .text("New paragraph!");

还可以避免使用链接语法（这个一般不会用上）：

  1.  var body = d3.select("body");
  2.  var p = body.append("p");
  3.  p.text("New paragraph!"); 
  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.          <meta charset="utf-8">
  5.          <title>testD3-3.html</title>
  6.          <script type="text/javascript" src="d3.v3.js"></script>
  7.      </head>
  8.      <body>
  9.          <script type="text/javascript">  
  10.  
  11.              var dataset = [ 5, 10, 15, 20, 25 ];  
  12.  
  13.              d3.select("body").selectAll("p")
  14.                  .data(dataset)
  15.                  .enter()
  16.                  .append("p")
  17.                  .text(function(d) {
  18.                      return "I can count up to " + d;
  19.                  })
  20.                  .style("color", function(d) {
  21.                      if (d > 15) {    //Threshold of 15
  22.                          return "red";
  23.                      } else {
  24.                          return "black";
  25.                      }
  26.                  });  
  27.  
  28.          </script>
  29.      </body>
  30.  </html>

效果：

参考书籍：《数据可视化实战》

D3基础---简介和数据的更多相关文章

  1. TCP基础知识（一）简介与数据包

    TCP详解(1):简介与数据包 TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议 应用层向TCP层发送用于网间传输 ...

  2. 现代3D图形编程学习-基础简介(2) (译)

    本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...

  3. Hadoop基础-MapReduce的数据倾斜解决方案

    Hadoop基础-MapReduce的数据倾斜解决方案 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数据倾斜简介 1>.什么是数据倾斜 答:大量数据涌入到某一节点,导致 ...

  4. 现代3D图形编程学习-基础简介(1) (译)

    本书系列 现代3D图形编程学习 基础简介 并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量 在阅读这本书的时候,你需要熟悉代数和几何 ...

  5. Android版数据结构与算法(一):基础简介

    版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 一.前言 项目进入收尾阶段,忙忙碌碌将近一个多月吧,还好,不算太难,就是麻烦点. 数据结构与算法这个系列早就想写了,一是梳理总结,顺便逼迫自己把一 ...

  6. 1.CSS基础简介

    一.基础简介 1.简介 CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观.通过使用CSS实现页面的内容 ...

  7. 1.bootstrap基础简介

    一·基础简介 1.Bootstrap,来自 Twitter,是一个用于快速开发 Web 应用程序和网站的前端框架,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JavaSc ...

  8. d3.js 之关联数据：data操作符

    数据可视化 在可视化工作中,一个基本出发点是将不同的数值映射到不同的可视化 元素的属性上,使其表现出各自不同的视觉特征. 比如:以数组中的每一个值为直径分别创建一个圆,我们得到三个圆: 在d3中,可视 ...

  9. Android MediaPlayer 基础简介

    本文链接: Android MediaPlayer 基础简介 简单介绍MediaPlayer的基本概念,状态,常用的方法与监听器. 什么是MediaPlayer MediaPlayer类可以用来播放音 ...

随机推荐

  1. [Perl]Windows 系统 Unicode 文件名操作（新建、重命名、枚举、复制）全攻略

    [Perl] Windows 系统 Unicode 文件名操作(新建.重命名.枚举.复制)全攻略 环境 XP/WIN7 Perl v5.16 编辑整理:PerlMonk.523066680 常见的那些 ...

  2. Math.round(11.5)

    Math.round(-11.5); Math.round(11.5); 经常看到这句代码,特意来总结一下. 查阅资料一直有人说是"四舍六入五成双",四舍六入没错,不过遇到正负数的 ...

  3. WEB新手之sql注入

    继续写题. 这题看上去是一道sql注入题.F12查看后台代码. 可以看到后台有两个变量,分别是uname以及passwd.然后接下来读一下后台的代码,这里的意思是,如果用户输入的密码经过md5加密后, ...

  4. jquery将json数据放入表格当中

    数据: var datas = [{ name:"淘宝", url:"www.taobao.com", type:"购物网站" },{ na ...

  5. Opencv3.0: undefined reference to cv::imread(cv::String const&, int)

    使用opencv,编译出错: undefined reference to cv::imread(cv::String const&, int) 自opencv3.0之后,图像读取相关代码在i ...

  6. BZOJ2748 音量调节

    音量调节   Description 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都要改变一次音量.在演出开始之前,他已经做好了一个列表,里面写着在每首歌开 ...

  7. c++开发规范

    目录 1. 头文件 1.1. Self-contained 头文件 1.2. #define 保护 1.3. 前置声明 1.4. 内联函数 1.5. #include 的路径及顺序 2. 作用域 2. ...

  8. Python爬取LOL英雄皮肤

    Python爬取LOL英雄皮肤 Python 爬虫  一 实现分析 在官网上找到英雄皮肤的真实链接,查看多个后发现前缀相同,后面对应为英雄的ID和皮肤的ID,皮肤的ID从00开始顺序递增,而英雄ID跟 ...

  9. bzoj3280: 小R的烦恼（最小费用最大流）

    Description 小R最近遇上了大麻烦,他的程序设计挂科了.于是他只好找程设老师求情.善良的程设老师答应不挂他,但是要 求小R帮助他一起解决一个难题.问题是这样的,程设老师最近要进行一项邪恶的实 ...

  10. simulate UE activity

    can: 1,connect, disconnect 2,configure serial,nic,com,model,version,IMEI,IMSI,IP 3,various AT comman ...