D3.入门教程——简介和安装


一、D3简介

1. D3 是什么

D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。如果你不知道什么是 JavaScript ,请先学习一点 JavaScript 的基础知识。

W3School 的 JavaScript 教程

JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。

2. D3有多受欢迎

在这里插入图片描述

3. 如何学习D3

官网:http://d3js.org/

官方API:https://github.com/d3/d3/blob/master/API.md

OUR D3.JS 数据可视化专题站:http://www.ourd3js.com/

二、怎么安装

1. 下载D3

D3.zip

2. 使用链接引用

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

时间:2019年8月17日18:13:15


-END-

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
D3.js是一个用于数据可视化的JavaScript库,它能够帮助你创建交互式的图表和图形。下面是一个简单的D3.js V3入门教程: 1. 引入D3.js库:在HTML文件中,你需要引入D3.js库。你可以从D3.js官方网站上下载最新版本的库文件,然后使用`<script>`标签将其引入到你的HTML文件中。 ```html <script src="path/to/d3.v3.min.js"></script> ``` 2. 创建SVG容器:在HTML中,使用`<svg>`标签创建一个容器来放置你的图表。你可以指定容器的宽度和高度。 ```html <svg id="chart" width="500" height="300"></svg> ``` 3. 绘制图表:使用D3.js的选择器来选择SVG容器,并使用数据绑定和图形生成函数来创建图表。 ```javascript // 选择SVG容器 var svg = d3.select("#chart"); // 创建数据 var data = [10, 20, 30, 40, 50]; // 绑定数据并创建矩形图形 svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d, i) { return i * 50; // 根据索引位置确定矩形的x坐标 }) .attr("y", function(d) { return 300 - d; // 根据数据值确定矩形的y坐标 }) .attr("width", 40) .attr("height", function(d) { return d; // 根据数据值确定矩形的高度 }) .attr("fill", "steelblue"); // 设置矩形的填充颜色 ``` 4. 运行代码:保存并刷新你的HTML文件,你应该能够看到一个简单的矩形图表。 这只是D3.js V3的入门教程的一个简单示例,D3.js还提供了许多其他功能和图表类型,如折线图、饼图和力导向图等。你可以深入学习D3.js文档,以了解更多详细信息和用法。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值