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. MongoDB基础知识记录

    MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...

  2. todolist作业涉及知识点

    window.event对象详细介绍 1.event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定 ...

  3. link和@import的区别是什么 ？

    1.link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务:@import属于CSS范畴,只能加载CSS. 2.link引入CSS是,在页面载入时间同时加载:@import页面网页完全 ...

  4. JS延时器 定时器 暂停器 中断器

    // numberMillis 毫秒 function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() ...

  5. [ActionScript 3.0] 通过BitmapData将对象保存成jpg图片

    此方法需要用到JPGEncoder.as和BitString.as这两个类,是将BitmapData对象转换成ByteArray,然后通过FileStream把此ByteArray写入到文件保存成jp ...

  6. 干掉Vivado幺蛾子（2）-- 快速替换debug probes

    目录 1. 什么是ECO 2. 操作步骤 参考文献: 我们做项目,进入找bug阶段时,需要用ILA捕获相关的信号.之前我做项目,每改动一次探针(debug probes),都要重新综合.实现,通常要花 ...

  7. 数组模拟单向链表例题（UVa11988）

    指针的链表实现方式是,当前节点的next指向下一个节点,用数组模拟就是 for(int i=next[0];i!=0;i=next[i]) i=next[i]:就是一条链. 例题: 你有一个破损的键盘 ...

  8. linux如何安装yum

    yum全称Yellow dog Updater Modified,yum的主要用途是对rpm包进行管理,包括安装.卸载.升级等.linux安装yum也较为简单,具体如下: 工具/原料 1.电脑: 2. ...

  9. Docker部署Nginx应用（2）

    Docker部署Nginx应用(2) 1.拉取Nginx镜像 [root@localhost ~]# docker pull nginx Using default tag: latest lates ...

  10. oracle12c之二 控制PDB中SGA 与 PGA 内存使用

    oracle12c之 控制pdb中sga 与 pga 内存使用 Memory Management using Resource Manager Oracle数据库资源管理器(资源管理器)现在可以在多 ...