【 D3.js 高级系列 】 总结

高级系列的教程已经完结，特此总结。

月初的时候曾说过本月内完结高级教程，今天是最后一天，算是可以交差了。O(∩_∩)O~

如此一来，【入门】-【进阶】-【高级】三个系列的教程算是完成了。本教程的目的在于提供一个网络的、免费的学习系列，希望大家能喜欢。

在写文章的过程中，笔者对于 D3.js 的理解也在逐步加深。因此，写在前面的文章一定比后面的文章要差，虽然部分经过了修改，但是还没有系统性修正的时间。现在三个系列的教程已经完成，接下来会花时间在修正上，尤其是入门系列，这一系列阅读量最大，但是问题也是最多的。o(>﹏<)o

因为阅读【入门系列】的人是最多的，因此笔者一直想花时间制作一个关于入门的视频教程系列。接下来会着手制作，名称定为【飞速入门系列】，估计有 5 个视频左右，长度适中，讲解 D3 最基础的知识，以便新手飞速入门。(⊙o⊙)

高级系列共 12 篇文章，列表如下。

1.0 文本的换行
1.1 封装文本自动换行
2.0 捆图
3.0 堆栈图
4.0 矩阵树图
5.0 颜色
5.1 颜色插值和线性渐变
6.0 值域和颜色
7.0 标注地点
8.0 标线
9.0 交互式提示框
10.0 思维导图

谢谢阅读。

文档信息

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-10-24 10:45:20

【 D3.js 高级系列 】 总结的相关文章

【 D3.js 高级系列 — 4.0 】 矩阵树图

矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映. 许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. 图1  http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/ 现以浙江.广西.江苏三省份2013年的GDP作为数据,以GDP大小作为节点的权重将其制作成矩阵树图. 1. 数据 新建一个citygdp.

【 D3.js 高级系列 — 1.0 】 文本的换行

在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入门-进阶-高级,是一级比一级难的,大家选自己需要的阅读即可. 高级系列预计会先写一些常见的小问题(如本文)和剩下的三个布局(矩阵树图.堆栈图.捆图),然后写一些较复杂的图的制作方法,以及其交互式操作,例如:思维导图.多图联动.地图的标线标注等等. 近来嗓子像火烧一样,很不舒服,希望能快点好.o(>﹏

【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变

颜色插值指的是给出两个 RGB 颜色值,两个颜色之间的值通过插值函数计算得到.线性渐变是添加到 SVG 图形上的过滤器,只需给出两端的颜色值即可. 1. 颜色插值 在[高级 - 第 5.0 章]里已经提到了颜色插值,在这里做一个例子.先定义颜色插值函数如下, var a = d3.rgb(255,0,0); //红色 var b = d3.rgb(0,255,0); //绿色 var compute = d3.interpolate(a,b); 如此一来,compute 可当做函数使用,参数的范

【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图

机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问题包含: 怎样在小球旁插入文字 怎样将小球换为别的图形 怎样插入图片 怎样限制小球运动的边界 本文将对以上问题依次做出讲解.当中前三点是 SVG 元素的问题.和 D3 无多大关联. 1. SVG 图片 SVG 的图片元素的具体讲解可看[官方文档-图片].通常,我们仅仅须要使用到图片元素的五个属性就够

【 D3.js 高级系列 — 6.0 】 值域和颜色

在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] 现希望10用浅绿表示,500用深绿表示,10到500之间的值用浅绿和深绿之间的颜色表示.显然,此处需要一个函数,传入的参数是10到500之间的值,返回值是浅绿到深绿之间的颜色值. [高级 - 第 5.1 章]介绍的颜色插值函数正好可以派上用场. var palegreen = d3.rgb(66,2

【 D3.js 高级系列 — 1.1 】 封装文本自动换行

在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:multext.js 下载之后,在 <script> 标签里引用: <script src="multext.js" charset="utf-8"></script> 或者直接通过网址引用: <script src="htt

【 D3.js 高级系列 — 9.0 】 交互式提示框

一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于所有图表.通过可给提示框定制外观,能给用户带来很好的体验. 1. 提示框的制作思路 提示框,就是"文字"加"边框".显示文字,一般来说用 SVG 的<text>,但是,有两个问题: 如果字符串过长,<text>元素不能自动换行,虽然可以通过<

【 D3.js 高级系列 — 8.0 】 标线

有时候,需要在地图上绘制连线,表示"从某处到某处"的意思,这种时候在地图上绘制的连线,称为"标线". 1. 标线是什么 标线,是指地图上需要两个坐标以上才能表示的元素.例如,北京和上海之间连线.用于绘制标线的图形元素有两种:线段元素<line>和路径元素<path>.如果是在平面地图上,且不要求两点之间有曲线,<line>已足够:如果是在球面地图上,或对于平面地图上的曲线,则需使用<path>.标线有时带有箭头,表示方

【 D3.js 高级系列 — 10.0 】 思维导图

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有"树形".因此,可以凭借这两种布局来制作思维导图. 1. 构造思路 树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: