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. join（）函数

    注意:会报错 正确的:

  2. “全栈2019”Java第三十九章：构造函数、构造方法、构造器

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  3. 2019中山大学程序设计竞赛（重现赛） Clumsy Keke

    Problem Description Keke is currently studying engineering drawing courses, and the teacher has taug ...

  4. CAS客户端整合（一） Discuz!

    有好几个系统需要接入CAS,所以登录模块统统需要重构 版本 CAS服务端是Java的 Cas-server-4.0 CAS的php客户端 是 phpCAS-1.2.0 论坛版本是 Discuz!X3. ...

  5. dataTable 从服务器获取数据源的两种表现形式

    var table = $('#example1').DataTable({ "processing": true,//加载效果 "autoWidth": fa ...

  6. lexical or preprocessor issue file not found in Xcode

    The very last suggestion is all I needed to fix this issue. Close & re-open Xcode.

  7. Windows 64位操作系统下安装和配置MySQL

    一安装方式 MySQL安装文件分为两种,一种是MSI格式的,一种是ZIP格式的.下面来看看这两种方式: MSI格式的可以直接点击安装,按照它给出的安装提示进行安装,Windows操作系统下一般MySQ ...

  8. CRS无法随操作系统自动启动

    1.环境说明 一套RedHat7.5上安装的11.2.0.4 RAC,进行正常的系统维护,重启主机后发现GI集群一直无法启动.   2.问题分析 (1).查看GI集群的OHASD进程的日志,发现操作系 ...

  9. 2. Javscript学习笔记——引用类型

    2. 引用类型 2.1 Object类型 Object 是一个基础类型,其他所有类型都从 Object 继承了基本的行为. 对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象 ...

  10. mvn修改版本号命令

    mvn -DnewVersion=1.0.0 -DgenerateBackupPoms=false versions:set