摘要：
首先我们需要的是 中国地图的json数据：请戳这里 接下来咱们直接上代码： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中国地图</title> <script src="./d3.min.js" 阅读全文
摘要：
首先我们还是说下 这章要用到的知识点，我在这里只是简单的罗列一下，如需详细了解，请戳这里查看中文官方文档 d3.hierarchy - 从给定的层次结构数据构造一个根节点并为各个节点指定深度等属性. node.sum - 评估和汇总定量值. d3.tree - 创建一个新的整齐(同深度节点对齐)的树 阅读全文
摘要：
力导向图的概念这里就不细说了，力导向图适合绘制关系型的信息； 下面先来说几个关于力导向图的知识点： 1、d3.forceSimulation([nodes]) 创建一个新的力导向图； 2、simulation.force(name[, force]) 如果指定了 force 则表示添加指定 name 阅读全文
摘要：
首先我们先梳理下 绘制饼图之前 需要掌握的新知识： 1、d3.arc(arguments..) 生成器用来在饼图或圆环图中生成 圆形 或 扇形 或 环形； arguments 是任意的; 它们只是简单地传递到 arc 生成器的访问器函数的对象。例如，根据默认的设置，传入的对象应该包含以下半径和角度信 阅读全文
摘要：
这里所说的交互式操作，就是说的图表的事件监听。 on('eventName',funvtion(){ ... } ) 第一个参数是要监听的事件名称 第二个参数是要执行的函数 跟jquery类似。 下面咱们在上一张的柱状图 基础上 ，给咱们的柱状图增加鼠标移入与移出事件，改变其颜色 代码： <!DOC 阅读全文
摘要：
在为图标增加动画之前，应该了解几个新的 api 如下 d3.transition() 开启一个动画过渡。 transition.duration() 指定每个元素的持续时间（以毫秒为单位）。 transition.delay() 指定每个元素的延迟时间（以毫秒为单位) 更详细的api讲解 请戳这里！ 阅读全文
摘要：
直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v5.min.js"></script> </hea 阅读全文
摘要：
直接接着上一章的图表，继续加上一个x坐标轴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scaleLinear</title> <script src="https://d3js.org/d3.v5.mi 阅读全文
摘要：
1、比例尺是什么？ 比例尺能将“一个区间”的数据映射到“另一个区间”。 例如[0, 1]对应到[0, 300]，当输入0.5时，输出150。或者将[0, 1, 2]对应到["red", "green", "blue"]，当输入2时，输出blue。 上述示例中的[0, 1]和[0, 1, 2]称为定义 阅读全文
摘要：
从这里开始 我们就将开始画一个简单的图表了 在此之前 ，最好掌握以下svg的基本知识。 一个间的的例子如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src 阅读全文
摘要：
1、选择元素 第一章有说过 d3.select() 和 d3.selectAll() ; 这两个方法的选择器与jQuery的元素、属性、css选择器使用方法基本一样，下面我们就说下他们的区别； d3.selectAll() ；选择的是所有匹配到的元素； d3.select(‘.calss’)、d3. 阅读全文
摘要：
咱们来说说 Update Enter Exit 他们的使用 由于 上一篇 说到的data()方法 给元素绑定数据 是需要元素与数据一一对应的关系， 那么如果元素个数与数据个数 对不上了怎么办？ 有可能存在 元素多了 或者数据多了的情况， 对于这种情况 就需要用到咱们要说的这三个方法了,或者说数据绑定 阅读全文
摘要：
D3.js 就是在元素选择与元素数据绑定的技术上进行后续操作的，所以元素选择与数据绑定是基础。 1、选择器 d3.select() d3.selectAll()介绍下常见用法如下（这里先说下基本用法，第四章会详细介绍）： <!DOCTYPE html><html lang="en"><head> < 阅读全文
摘要：
1、利用D3.js 在网页上显示一些文字内容； 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <script src="https://d3js.org/d3.v5.min 阅读全文
摘要：
可视化工具D3.js，就不赘述他的简介与下载了，官网上看，直接上教程： 可视化工具D3.js教程 入门 （第一章）—— hello world 可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定 可视化工具D3.js教程 入门 （第三章）—— 理解 Update Enter Exit 阅读全文