D3.js的v5版本入门教程
关注
分享
扫一扫
文章平均质量分 75
数星星等天明
个人认为我还是比较喜欢打酱油
展开
-
D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js
D3.js的v5版本入门教程（第一章） 1、需要的一些工具 这个其实随便！最简单的就是建一个.txt文件就可以敲起代码来！作者本人用的是myeclipse（主要需要安装tomcat），因为写的是前端，一个浏览器查看效果当然是不可少的，建议使用chrome 浏览器，其强大的调试功能可以让你事半功倍！ 2、需要预备的知识 如果你是编程小白，那么这...原创 2018-04-22 21:13:50 · 22540 阅读 · 2 评论 -
D3.js的v5版本入门教程（第十五章）—— 树状图
D3.js的v5版本入门教程（第十五章） 在本章我们将利用贝塞尔曲线作为树的边，并绘制一个完整的树状图，包括节点、边、文字，在这里我们会用到一个曲线生成器-贝塞尔曲线生成器，看到这里，你是不是应该松一口气了，因为我们在绘制饼状图的时候就用到了一个弧形生成器，这两个有类似的地方，但是还是避免不了引入新的知识点 为了绘制一个树状图，我们还是需要以下新的知识点d3.hiera...原创 2018-04-23 09:11:28 · 14444 阅读 · 0 评论 -
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程（第十四章） 这一章我们来绘制一个力导向图，什么叫力导向图，通俗一点将就是有节点和线组成，当鼠标拖拽一个节点时，其他节点都会受到影响（力导向图有多种类型，本章绘制的效果就是这样，其他类型的读者可以自己去试试），还是给读者提个醒，这一章又会有很多新的知识点，请拿出的学习新东西的本领来 为了绘制一个力导向图，我们还是需要以下新的知识点d3...原创 2018-04-23 09:04:44 · 31695 阅读 · 9 评论 -
D3.js的v5版本入门教程（第十三章）—— 饼状图
D3.js的v5版本入门教程（第十三章） 这一章我们来绘制一个简单的饼状图，我们只绘制构成饼状图基本的元素——扇形、文字，从这一章开始，内容可能有点难理解，因为每一章都会引入比较多的难理解知识点，在这里作者本人也只是粗略的讲解每个新知识点的意思！如果不是很理解的话，需要读者自行查看官网API 为了绘制一个饼状图，我们还是需要以下新的知识点d3.arc( {} ),弧形生...原创 2018-04-23 08:56:23 · 7940 阅读 · 4 评论 -
D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形
D3.js的v5版本入门教程（第十二章） D3中提供了各种制作常见图形的函数，在d3的v3版本中叫布局，通过d3.layout.xxx，来新建，但是到了v5，新建一个d3中基本的图形的方式变了（我也并不知道是不是还叫布局，我觉得也可以这么叫，反正布局指的也是一个绘图函数） 下面是d3中一些常见的部分图形 bubble —— 泡泡图 packing...原创 2018-04-23 08:48:41 · 10960 阅读 · 0 评论 -
D3.js的v5版本入门教程（第十一章）——交互式操作
D3.js的v5版本入门教程（第十一章） 与图形进行交互操作是很重要的！所谓的交互操作也就是为图形元素添加监听事件，比如说当你鼠标放在某个图形元素上面的时候，就会显示相应的文字，而当鼠标移开后，文字就会消失，或者鼠标单击一下某图形元素就会使它动起来 为了与图形元素进行交互操作，我们还是需要以下新的知识点on("eventName",function)；该函数是添加一个监...原创 2018-04-23 08:45:18 · 9062 阅读 · 5 评论 -
D3.js的v5版本入门教程（第十章）——让图表动起来
D3.js的v5版本入门教程（第十章） 在这一章我们干点有趣的事——让我们上一章绘制的图表动起来，这样岂不是很有意思 为了让图表动起来，我们还是需要以下新的知识点.attr(xxx) .transition() .attr(xxx)，transition()表示添加过渡，也就是从前一个属性过渡到后一个属性 .duration(2000)，表示过渡时间持续2秒 .dela...原创 2018-04-22 22:02:43 · 9924 阅读 · 0 评论 -
D3.js的v5版本入门教程（第九章）——完整的柱状图
D3.js的v5版本入门教程（第九章） 一个完整的柱状图应该包括的元素有——矩形、文字、坐标轴，现在，我们就来一一绘制它们，这章是前面几章的综合，这一章只有少量新的知识点，它们是d3.scaleBand()：这也是一个坐标轴，可以根据输入的domain的长度，等分rangeRound域（类比range域） d3.range()：这个比较复杂，建议去看百度（或者官方API...原创 2018-04-22 21:58:30 · 12391 阅读 · 8 评论 -
D3.js的v5版本入门教程（第八章）—— 坐标轴
D3.js的v5版本入门教程（第八章） D3中没有现成的坐标轴图形，需要我们自己用其他组件拼凑而成。D3中提供了坐标轴组件，使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一个坐标轴，我们还是需要以下新的知识点call()函数 定义一个坐标轴 坐标轴是有朝向的，在这里我们以向下朝向、水平方向的坐标轴为例，其他朝...原创 2018-04-22 21:53:47 · 10555 阅读 · 2 评论 -
D3.js的v5版本入门教程（第七章）—— 比例尺的使用
D3.js的v5版本入门教程（第七章） 比例尺在D3.js中是一个很重要的东西，我们可以这样理解d3.js中的比例尺——一种映射关系，从domain映射到range域（为什么会是domain和range呢？等一下你就会看到，因为我们在建立比例尺是常常会用到domain()和range()两个函数，当然不是绝对的，D3中有很多类型的比例尺） 下面介绍在本套教程中常用的两种比例尺...原创 2018-04-22 21:40:27 · 10951 阅读 · 0 评论 -
D3.js的v5版本入门教程（第六章）——做一个简单的图表
D3.js的v5版本入门教程（第六章） 从这一章开始，进入正式的d3,js绘图阶段，有了前面几章基本知识的积累，这样看接下来的绘图代码才不会觉得比较辛苦 做一个简单的图表 为了做一个简单的图表，我们还是需要以下新的知识点svg画布：svg绘制的是矢量图（还有canvas画布，这个是JavaScript用来绘制2D图像的，是位图） rect元素：是d3...原创 2018-04-22 21:37:59 · 15411 阅读 · 6 评论 -
D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素
D3.js的v5版本入门教程（第五章） 1、选择元素 现在我们已经知道，d3.js中选择元素的函数有select()和selectAll()，下面来详细讲解一下 假设我们的<body>中有三个<p>，如下 <p>dog</p> <p>cat</p> <p>p原创 2018-04-22 21:32:55 · 10593 阅读 · 0 评论 -
D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit
D3.js的v5版本入门教程（第四章） Update、Enter、Exit是D3.js中很重要的概念，下面来讲一下它们到底是什么？（当你看完后。你就会知道如果数据集个数和选择集个数不匹配的情况下使用data()，D3.js会怎么办） 在使用data()时，例如现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个<p>绑定，但是，现在就有一个问题—...原创 2018-04-22 21:27:03 · 13131 阅读 · 4 评论 -
D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据
D3.js的v5版本入门教程（第三章） 在D3.js中，选择元素和绑定元素是最基本的内容，也是很重要的内容，等你看完整个教程后你会发现，这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 1、选择元素 在D3.js中，选择元素的函数有两个d3.select() d3.selectAll() 这两个函数返回的就是选择集 ...原创 2018-04-22 21:23:52 · 14400 阅读 · 0 评论 -
D3.js的v5版本入门教程（第二章）—— 第一个程序 Hello World
D3.js的v5版本入门教程（第二章） 1、利用D3.js在网页上显示一个Hello World文本<body> <p></p> <p></p> <script> var p = d3.select("body") .selectAll("p")原创 2018-04-22 21:19:23 · 15112 阅读 · 0 评论 -
D3.js的v5版本入门教程（前篇）—— 关于
D3.js入门教程 1、D3.js简介 D3.js是一个强大的数据可视化js语言，可以利用svg在网页上展示各种精美的矢量图 2、D3.js的官方 官网：https://d3js.org/ 官方API：https://github.com/d3/d3/blob/master/API.md 3、适合人群 ...原创 2018-04-23 09:45:16 · 51067 阅读 · 14 评论