1 D3简介

发布于2011年,全称Data-Driven Documents,直译为“数据驱动的文档”。
简单概括为一句话:D3是一个Javascript的函数库,是用来做数据可视化的
文档指DOM,即文档对象模型(Document Object Model)。D3允许用户绑定任意数据到DOM,然后根据数据来操作文档,创建可交互式的图表。
由于D3是Javascript的函数库,故它也是一个js文件,也常称为D3.js。

2 D3安装

1)安装D3:
在<script>中引入D3文件即可
官方下载的D3文件名为,d3.zip,里面有三个文件,d3.js、d3.min.js(压缩版)以及LICENSE(版权许可证文件)
也可以通过网络引用d3文件:
在head标签中加入<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
可以发现http://d3js.org/d3.v5.min.js中使用的是v5版本,如果想使用v3版本,将v5改成v3即可。
2)搭建服务器(可选)
安装Apache
3)例子:
1⃣️页面中输出hello world
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var p = d3.select("body")
.selectAll("p")
.text("Hello World!");
p.style("color","red");
p.style("font-size","72px");
</script>
2⃣️页面中画一个圆
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 400;
var height = 400;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
svg.append("circle")
.attr("cx","50px")
.attr("cy","50px")
.attr("r","50px")
.attr("fill","red");
</script>

  

 

D3笔记01——D3简介与安装的更多相关文章

  1. 【传智播客】Libevent学习笔记(一):简介和安装

    目录 00. 目录 01. libevent简介 02. Libevent的好处 03. Libevent的安装和测试 04. Libevent成功案例 00. 目录 @ 01. libevent简介 ...

  2. java大数据最全课程学习笔记(1)--Hadoop简介和安装及伪分布式

    Hadoop简介和安装及伪分布式 大数据概念 大数据概论 大数据(Big Data): 指无法在一定时间范围内用常规软件工具进行捕捉,管理和处理的数据集合,是需要新处理模式才能具有更强的决策力,洞察发 ...

  3. redis学习笔记01 — 基本介绍、安装配置及常用命令

    redis--NoSQL的一种 为了解决高并发.高可用.高扩展.大数据存储等一系列问题而产生的数据库解决方案,就是NoSQL NoSQL,非关系型数据库,全名:Not Only Sql,它不能代替关系 ...

  4. Mongodb 笔记01 MongoDB 简介、MongoDB基础知识、启动和停止MongoDB

    MongoDB 简介 1. 易于使用:没有固定的模式,根据需要添加和删除字段更加容易 2. 易于扩展:MongoDB的设计采用横向扩展.面向文档的数据模型使它能很容易的再多台服务器之间进行分割.自动处 ...

  5. 01: jenkins简介与安装

    jenkins参考博文:https://www.w3cschool.cn/jenkins/jenkins-173a28n4.html Jenkins中文官网:http://www.jenkins.or ...

  6. 01 . Prometheus简介及安装配置Grafana

    Promethus简介 Prometheus受启发于Google的Brogmon监控系统(相似的Kubernetes是从Google的Brog系统演变而来),从2012年开始由前Google工程师在S ...

  7. Gradle笔记——Gradle的简介与安装

    本博客对Gradle进行一个简单的介绍,以及它的安装. Gradle介绍 Gradle是一个基于JVM的构建工具,它提供了: 像Ant一样,通用灵活的构建工具 可以切换的,基于约定的构建框架 强大的多 ...

  8. NFC学习笔记2——Libnfc简介及安装

    我一直希望自己的文章做一些记录的英文翻译.趁着学习NFC,现在,libnfc主页libnfc介绍和不同的操作系统libnfc文章做一些翻译安装.一方面,提高自己的英语,一方面有了解libnfc. 原文 ...

  9. SpagoBI系列----------[01]SpagoBI简介及安装步骤

    商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的BI管理器能 够控制.校验.验证与分发这些BI对象. ...

随机推荐

  1. iOS----收集的一些小技巧

    1,如何将试图置于最顶层 第一种方法 _myview.layer.zPosition =5; 第二种方法 [self.view insertSubview:_MyView atIndex:999]; ...

  2. POJ 2449 Remmarguts' Date ( 第 k 短路 && A*算法 )

    题意 : 给出一个有向图.求起点 s 到终点 t 的第 k 短路.不存在则输出 -1 #include<stdio.h> #include<string.h> #include ...

  3. git cherry-pick的使用

    [Git] Git整理(五) git cherry-pick的使用 2018年07月13日 23:49:16 FightFightFight 阅读数:31649    版权声明:本文为博主原创文章,未 ...

  4. [CSP-S模拟测试]:Dash Speed(线段树+并查集+LCA)

    题目描述 比特山是比特镇的飙车圣地.在比特山上一共有$n$个广场,编号依次为$1$到$n$,这些广场之间通过$n−1$条双向车道直接或间接地连接在一起,形成了一棵树的结构. 因为每条车道的修建时间以及 ...

  5. Flask学习 2修改路由规则 传入参数访问url

    #!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: flask0 ...

  6. java 图片裁剪代码

    package com.actionsoft.apps.addons.invoice.pc.test; import java.awt.image.BufferedImage;import java. ...

  7. Android7.1后对于Toast类型窗口的限制

    在处理问题的时候,经常会遇到ANR,停止运行等问题,经过分析和验证,和如下的一行关键log有关 WindowManager: Adding more than one toast window for ...

  8. RabbitMq(7)消息延时推送

    应用场景 目前常见的应用软件都有消息的延迟推送的影子,应用也极为广泛,例如: 淘宝七天自动确认收货.在我们签收商品后,物流系统会在七天后延时发送一个消息给支付系统,通知支付系统将款打给商家,这个过程持 ...

  9. GitBook "How to be a programmer"

    网址:https://www.gitbook.com/book/braydie/how-to-be-a-programmer/ 最近看了这本 GitBook,主要讲程序员应该掌握的技能和注意的问题,分 ...

  10. MYSQL 的七种join

    建表 在这里呢我们先来建立两张有外键关联的张表. CREATE DATABASE db0206; USE db0206; CREATE TABLE `db0206`.`tbl_dept`( `id` ...