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！

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

 d3.select("body")

      .append("p")

      .text("New paragraph!");

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

 var body = d3.select("body");

 var p = body.append("p");

 p.text("New paragraph!"); 
 <!DOCTYPE html>

 <html>

   <head>

         <meta charset="utf-8">

         <title>testD3-3.html</title>

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

     </head>

     <body>

         <script type="text/javascript">  

             var dataset = [ 5, 10, 15, 20, 25 ];  

             d3.select("body").selectAll("p")

                 .data(dataset)

                 .enter()

                 .append("p")

                 .text(function(d) {

                     return "I can count up to " + d;

                 })

                 .style("color", function(d) {

                     if (d > 15) {    //Threshold of 15

                         return "red";

                     } else {

                         return "black";

                     }

                 });  

         </script>

     </body>

 </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. Linux系统忘记管理员密码（CentOS、RHEL、Ubuntu）

    Linux系统忘记管理员密码(CentOS.RHEL.Ubuntu) 系统使用过程中,尤其是生产环境中.万一忘记管理员密码,该怎么办?是不是很绝望? 1.RHEL 7.0 重启主机进入引导界面键入e键 ...

  2. HAOI2010 工厂选址

    题目链接:戳我 数组开小火葬场qwqwq 就是一个贪心吧.对于一个数,我们知道只有两种摆放方式.所以我们可以先都放到新的里面,然后做一下新的-原先的差,按照差从大到小排序,依次提取数值减去即可. 代码 ...

  3. nowcoder(牛客网)普及组模拟赛第一场 解题报告

    蒟蒻我可能考了一场假试 T1 绩点 这题没什么好说的,应该是只要会语言的就会做. T2 巨大的棋盘 一个模拟题吧qwq,但是要注意取模的时候先加上n或者m再取模,要不然会错的. #include< ...

  4. 使用git命令提示“不是内部或外部命令

    问题描述: 打开windows的cmd,在里面打git命令会提示“不是内部或外部命令,也不是可运行的程序” 解决办法: 找到git安装路径中bin的位置,如:D:\Program Files\Git\ ...

  5. 在通知栏上玩游戏，Steve iOS 游戏实现思路

    最近有一款游戏特别的火爆,叫做Steve ,一种可以在通知中心直接玩的游戏.作者的脑洞也是非常的大,实在让人佩服.其实实现起来也简单,就是用到了iOS8新特性 app extension(Today ...

  6. String 源码浅析(一)

    前言 相信作为 JAVAER,平时编码时使用最多的必然是 String 字符串,而相信应该存在不少人对于 String 的 api 很熟悉了,但没有看过其源码实现,其实我个人觉得对于 api 的使用, ...

  7. Python2和Python3之间的区别

    编码区别 Python3.X版本中源码文件默认使用的是utf-8编码 Unicode 字符串 Python 2有两种字符串类型:Unicode字符串和非Unicode字符串 Python 3只有一种类 ...

  8. vue-cli起的webpack项目 用localhost可以访问，但是切换到ip就不可以访问

    我用的是vux起的一个项目(移动端,基于vue的),因为是移动端的,需要在手机上测试,发现用http://localhost:8081/访问的挺好的,但是换到ip就访问不了,期初我以为是代理的原因,将 ...

  9. Doc/Docx/PDF to Html

    TODO 判断源文件是否有格式??

  10. ORM中的一对一和多对多

    ORM中的一对一和多对多 Django ORM  ORM 一对一 什么时候用一对一? 当 一张表的某一些字段查询的比较频繁,另外一些字段查询的不是特别频繁 把不怎么常用的字段 单独拿出来做成一张表 然 ...