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. BZOJ 2535：NOI 2010 航空管制

    [NOI2010]航空管制 题面请点上面. 首先第一问,我第一想法是把它放到一个小根堆中,然而这是不行的. 正确的思路是,把图反过来建,然后放到一个大根堆里去. 至于原因,感性理解一下,正着贪是有后效 ...

  2. OI数据结构&&分治 简单学习笔记

    持续更新!!! [例题]简单题(K-D tree) 题目链接 线段树 [例题](环上最大连续和) 给定一个长度为n的环形序列A,其中A1与A_n是相临的,现在有q次修改操作,每次操作会更改其中一个数, ...

  3. 解决$ git clone fatal: Authentication failed

    今天在使用git clone克隆项目的时候报如下错误: $ git clone XXXXXX Cloning into 'XXXX'... fatal: Authentication failed f ...

  4. A. The Meaningless Game（数学）

    A. The Meaningless Game time limit per test:1 second memory limit per test:256 megabytes input:stand ...

  5. javascript显示年月日时间代码显示电脑时间

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. php-fpm 解析

    以下内容转自:https://blog.csdn.net/u010785091/article/details/78705690 有一些工具一直在用,却从来也不知道这些东西是什么. 现在想想还是梳理一 ...

  7. [Swift]字符串大小写转换，同时实现本地化或设置语言环境

    在NSString中提供了3种字符串大小写转换方式:1. 转换字符串大小写2. 转换字符串大小写,并实现本地化3. 转换字符串大小写,并设置语言环境. 一. 转换字符串大小写如果只是想单纯的将字符串进 ...

  8. Run Faster-JAVA

    又好久没有写点啥了,平时都忙于工作,忙于应付工作中的问题,各种吸收却并没有好好的消化,该是"反刍"一下的时候了. 本篇名叫"Run Faster,JAVA",其 ...

  9. supervisor 使用

    cat /etc/supervisord.conf https://www.cnblogs.com/yuzhoushenqi/p/6825204.html http://127.0.0.1:1001/ ...

  10. mysq exists和in

    我们在学习Yii2的时候,一定接触过这样的where输入 $query->where(["exists",xxxx]); User::find()->where([&q ...