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. 【Selenium专题】WebDriver启动firefox浏览器

    firefox浏览器不需要下载驱动,原生支持,以下是代码运行环境,firefox启动封装在方法startFirefox()中 import org.openqa.selenium.WebDriver; ...

  2. 数据库客户端工具Oracle SQL Developer

    Oracle SQL Developer是Oracle官方提供的数据库连接工具.不仅可以连接自己的数据库(Oracle),而且还可以连接多种其他的数据库(比如:Access.MySQL.SQL Ser ...

  3. NOIP提高组题目归类+题解摘要（2008-2017）

    因为前几天作死立了一个flag说要把NOIP近十年的题目做一做,并写一个题目归类+题解摘要出来,所以这几天就好好的(然而还是颓废了好久)写了一些这些往年的NOIP题目. 这篇博客有什么: 近十年NOI ...

  4. path的用法和所遇错误

    首先上源代码: def _path(route, view, kwargs=None, name=None, Pattern=None): if isinstance(view, (list, tup ...

  5. iOS 逆向工程

    HOOK(钩子函数)在OCD动态化语言中使用swizzle method (交换方法来实现) 实际上静态C语言中的函数也是有办法hook的,这也说明绝对的静态语言是不存在的 Mach-O:对于每个操作 ...

  6. 数论 CF230B T-primes

    CF230B T-primes 我们知道质数是只有两个不同的正数因数的正整数.相似的,我们把一个正整数 t 叫做 T质数,如果 t 恰好有三个不同的正整数因数. 你被给了一个含有 n 个正整数的数组. ...

  7. HEOI2019游记(退役记)

    少了回程铁路相关信息,有空补 AFO 辣鸡蒟蒻ghj1222顺利地退役了 由于没带手机拍照片,本次坐动车不写运转记录,下次去CTS/APIO应该是坐普速车,应该能带手机拍照,应该会写运转记录 Day ...

  8. leetcode-824-Goat Latin（字符串的处理）

    题目描述: A sentence S is given, composed of words separated by spaces. Each word consists of lowercase ...

  9. Linux基本结构

    Linux 的基本目录结构:     基本介绍:      Linux 的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录“/”,然后再次目录下载创建其他的目录. 经典的一句话:linu ...

  10. Eclipse MarketPlace 打不开，对话框闪退

    原文地址: https://blog.csdn.net/wonder_boy869/article/details/81031222 Eclipse的版本更新到了4.8.0(photon版),点击he ...