![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
D3入门教程
我是大魔王2
不要在该奋斗的年纪 选择安逸-
展开
-
D3.入门教程——简介和安装
D3 是什么D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。如果你不知道什么是 JavaScript ,请先学习一点 JavaScript 的基础知识。...原创 2019-08-17 18:11:03 · 2923 阅读 · 0 评论 -
D3入门教程——第一个程序HelloWorld
文章目录一、Html是怎么输出helloworld的二、Js是怎么输出helloworld的三、D3是怎么输出helloworld的先尝试用 D3 写第一个 HelloWorld 程序。学编程入门的第一个程序都是在屏幕上输出 HelloWorld,本课稍微有些不同,不是单纯的输出。一、Html是怎么输出helloworld的代码:<html> <head> ...原创 2019-08-17 18:26:49 · 1110 阅读 · 0 评论 -
D3入门教程——选择数据和数据绑定
文章目录一、如何选择元素二、如何绑定元素1.datum()一、如何选择元素d3.select():是选择所有指定元素的第一个d3.selectAll():是选择指定元素的全部例如:var body = d3.select("body"); //选择文档中的body元素var p1 = body.select("p"); //选择body中的第一个p元素var p = ...原创 2019-08-18 11:27:18 · 1184 阅读 · 0 评论 -
D3入门教程——选择、插入、删除元素
文章目录一、选择1.select()1.selectAll()3.通过id选择4.通过class选择二、插入1.append()2.insert()三、删除一、选择1.select()select():选择一个元素,如果有多个元素则选择第一个例如:现在有三个元素:<p>Apple</p><p>Pear</p><p>B...原创 2019-08-18 11:53:10 · 2479 阅读 · 0 评论 -
D3入门教程——做一个简单的图表
文章目录一、准备1.什么是画布1)SVG2)Canvas3)两者之前的区别二、开始1.添加画布2.绘制矩形三、完整代码一、准备1.什么是画布HTML 5 提供两种强有力的“画布”:SVG 和 Canvas。1)SVGSVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事...原创 2019-08-18 12:22:14 · 3718 阅读 · 1 评论 -
D3入门教程——比例尺的使用
文章目录一、介绍1.概念2.线性比例尺3.序数比例尺二、使用1.线性比例尺2.序数比例尺一、介绍1.概念我们知道地图有比例尺,作为地图缩放时的标尺。同样的D3也比例尺。D3绘制表是需要依赖数据的,有时候数据可能太大或太小,太小的数据如果按照实际绘制导致看不见,太大的数据按照事迹绘制将会超出画布的范围。因此比例尺在D3绘制中是非常重要的。在D3种有两种比例尺:2.线性比例尺线性比...原创 2019-08-18 13:00:12 · 2173 阅读 · 2 评论 -
D3入门教程——坐标轴
文章目录一、坐标轴二、使用坐标轴1.定义坐标轴2.添加坐标轴3.设定坐标轴的样式和位置4.完整代码一、坐标轴坐标轴在可视化图形中是很重要的一部分,很多图表的展示都需要使用坐标轴,例如:柱形图、折线图。D3中的坐标轴:SVG 画布的预定义元素里,有六种基本图形:矩形圆形椭圆线段折线多边形还有一种比较特殊的存在,也是最强的元素:路径所以说,在D3种是没有现成的坐标轴...原创 2019-08-18 13:35:13 · 5668 阅读 · 0 评论