d3v3js教程

㈠ D3.js 选择

D3 可以选择一些 HTML 或 SVG 元素并更改它们的样式和/或属性： d3.select 和 d3.selectAll 。

这两个函数都将字符串作为其唯一参数。该字符串指定要选择的元素，并采用 CSS 选择器字符串的形式（例如 div.item ， #my-chart 或 g:first-child ）。

[//]: .classed 是一个 boolean.

除了将常量值传递给 .style , .attr , .classed , .property ,之外 .text ， .html 您还可以传入一个函数。例如：

该函数接受两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 （或“数据”）。 i 是选择中元素的 索引 。

此方法有两个参数：第一个是指定事件类型的字符串;第二个是触发事件时调用的函数（“回调函数”）。此回调函数有两个参数，通常命名为 e 和 d 。 e 是 DOM 事件对象并且 d 是连接数据。

最常见的事件包括（有关详细信息，请参阅 MDN 事件参考）：

在事件回调函数中， this 变量绑定到触发事件的 DOM 元素。这使我们能够执行以下操作：

[//]:这 this 是一个 DOM 元素，而不是 D3 选择，因此如果您想使用 D3 修改它，您必须首先使用 d3.select(this) .

.append 可以使用 D3和 .insert 方法将元素添加到选择的元素中。可以使用 删除元素 .remove 。

.append 将一个元素附加到选择中的每个元素。如果元素已经有子元素，则新元素将成为 最后一个子元素 。第一个参数指定元素的类型。

.insert 类似于 .append 但它允许我们指定第二个参数， 该参数指定（作为 CSS 选择器）在哪个元素之前插入新元素 。

.remove 从页面中 删除选择中的所有元素 。例如，给定一些圆圈，您可以使用以下方法删除它们：

大多数选择方法的返回值是选择本身。这意味着诸如 和 之类的选择方法 .style 可以 .attr 链接 .on 起来。例如：

该 .each 方法允许您为 选择的每个元素 调用一个函数。

回调函数有两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 。 i 是选择中元素的 索引 。 this 关键字是指选择中的当前 HTML 或 SVG 元素。

这是一个示例， .each 用于为每个选择的元素调用函数。该函数计算索引是奇数还是偶数，并相应地修改圆：

该 .call 方法允许调用一个函数， 选择本身 作为第一个参数传递给该函数。

.call 在您想要对选择进行操作的可重用函数时很有用。

例如， colorAll 获取一个选区并将选区元素的填充设置为橙色：

您可以使用 D3 的 .filter 方法过滤选择。第一个参数是一个函数，它返回 true 是否应该包含元素。过滤的选择由该 filter 方法返回，因此您可以继续链接选择方法。

在此示例中，您过滤偶数元素并将它们着色为橙色：

通过调用 .sort 和传入比较器函数对选择中的元素进行排序。比较器函数有两个参数，通常是 a 和 b ，它们代表被比较的两个元素的数据。如果比较器函数返回负数， a 将放在前面 b ，如果是正数， a 将放在后面 b 。

㈡ d3.js力导向图节点设置为图片

设置方法如下：
1、首先打开节点设置，选择固定节点。好雀乱
2、保存当前岁埋节点后，点击左友档上角的输入，另存为pdf文件。
3、将pdf文件保存在桌面即可。

㈢ D3.js的V5版本-Vue框架中使用-流程图

因最近公司项目用轮雹信到流程图,网上找了些资料,自己写写,总结下

需要安装dagre-d3库，d3的流程图库。

//得到流程图绘制对象

//绘制节点

this.graph.setNode()

//绘制连接肆庆

this.graph.setEdge()

温馨提示：详腊轮细使用可以去官网查询

4.组件调用

㈣ [D3] 初识D3.js

调研了一下知识图谱的前端显示方案。最简单的就是直接用Echarts等封装好的关系图来绘制，但难以个性化的设定。所以打算用更加接近底层的D3.js来做前端展示。

D3.js 看上去入门较难，官方文档一眼望去，密密弯茄前麻麻全是英文，纳答一点都不像做可视化工作的工具库，非常劝退。

实际上，D3官方文档并不是拿来入门阅读的，而是使用的时候，用来查阅的。这种把全部函数密密麻麻分布在一页里操作，其实在查阅的时候非常高效，只用ctrl+f，利用浏览器自带的检索功能，即可找到想要的功能解释。

我花了半天的时间完成了D3.js的入门。方法是带着一个实际功能需求来看Shirley Wu 的入门教学视频，然后在Obeservable上实现这个案例。今天我想做一个滑动日期选择器，有12个不同颜色的线段构成，每个线段代表一个月份，可以拖动选择（今晚无法上传图片）。这种埋清个性化的设计，用Echarts等工具就难以满足需求。D3做这个，就非常容易。

㈤ 怎么用d3.js 制作3d效果

1，建立一个扩展名为js的文件，比如myjs.js
2，复制和中间的js代码到这个文件中版，然后保存！
3，在权你的html页面中加入js引用代码：
注意：在引用js一定要注意路径问题，你可以在你的网站根目录中建一个文件夹，比如：js然后把js文件复制进行

㈥ D3.js画图：3D动态饼图(齿轮图)

通常画可视化图的工具很多，除了d3.js，还有echarts.js等。

通过比较，看起来ECharts.js更容易上手，但是因为我需要更灵活更符合个性定制化的工具，所以选了d3.js。

经过一段时间的磨炼，从折线图、闭合路径图、蜂窝图、直角坐标、极坐标都玩了个遍。
那这次就来个3D的吧，其实d3.js做3D的图不是很容易的，有更好的选择，但我认准了d3.js，一条道走到黑吧(想起高中数学老师说的话，当你解题解到一半时发现有更好的办法，不，赶紧忘掉，接着当前的方法，只要方法没错，总能解出来，也许会傻一点，但是一定会有正确的结果；如果中途放弃，也许另一个方法更快更聪明，但也许更慢或者错误，不算到最后，谁都不知道谁最准确。我选择相信他的话，于是。。。我成了程序员O(∩_∩)O哈哈~)。

有人鄙视拿来主义，要我说，你能拿来那是你的本事，如果还能在此基础上做出更好的东西，何乐而不为呢？
每个人时间有限，每个项目也有deadline，不可能从每一个螺丝钉怎么拧开始学起，不然怎么会有那么多五花八门的框架，会有封装好的组件和接口，正因为有人已经做了前期工作，所以时间才能省下来做更有意义的事情，这就是站在巨人肩上的道理所在吧。
但是我们得明白拿来的东西的原理，以及出了问题该怎么解决的能力。然后才能做出更厉害的东西。

首选当然是官网的例子咯，目测搜了一圈，终于找到一个3D Donut。就是你了，我的巨人。
把该地址的donut3d.js拷贝下来作为画3D饼图的基础js，待会会在此基础上修改，以满足我的要求(长的像齿轮的要求)。

那我们就一睹她的芳容吧。
如果这张图符合你的要求，那就打住，不用往下看了，直接看官网例子即可。
注意d3版本的问题，如果你用d3.v3.js，恭喜你，啥也不用改，直接拿来用；如果你用d3.v5.js，那稍微改下方法，比如d3.v5.js没有d3.layout，所以d3.layout.pie改成d3.pie。我就是那个不幸的人，用的d3.v5.js。没关系，改起来很快，运行下，看哪里有错，就改哪里，O(∩_∩)O哈哈~so easy！

还是先上个我已经改好之后的3D饼图(齿轮图)吧，方便说明。
其实显示的时候是个动态的，一节一节显示出齿轮的。
背景是黑乎乎的，据说现在流行黑乎乎的背景，显得有科技感，技术也要赶时髦啊，我这么fashion的人，做出来的东西也要fashion啊O(∩_∩)O~

从以上分析可以看出，难啃的骨头在第4点。这个图断断续续花了3天时间才搞定，为啥是断断续续呢，因为还有其他工作要做嘛，你懂得。
那就按顺序一条一条实现，总有一天我们的愿望都能实现！

首先新建svg及设置宽高。

我是切分成了32个小齿轮(包含透明的)，如果你想分的更细，可以分成40或50个，只要你觉得好看就行。
既然要分成32个小立体快，那数据也要切分成32个。

通过以上处理，把数据整合成可以生成齿轮的完整数据dataset。

如果不增加左侧面和右侧面，那调用donut3d.js的draw方法后，会生成什么样的图形呢？

请各位仔细看。

是不是有种被掏空的感觉？如果你觉得这样挺好看，那也行，打住吧，后面就不用再看了；如果你想补齐其他面，请耐心往下看。
经过观察和比较，增加左侧面和右侧面就能填满空虚的心啦啦啦～
这次要在donut3d.js这个巨人身上添砖加瓦咯。

然后再用新增加的两个方法画出左右侧面。

终于填满需要的每一面，看上去像个立体齿轮图了。
这个图是很久之前做的，当时花了很长时间调试，每一个面有4条边，定位2个点，再加上高度和内半径，就可以计算出4个点，然后就可以画出4条边，最后填充颜色，一个面就完成了。
最近整理文档时觉得有必要写出来，方便以后查阅和探讨，也告诉自己积累是一个长期过程，不急不躁，慢慢来，一步一步完成既定目标，总有一天你会走遍技术的每个角落。
现在我整理成vue组件，传一个百分比的参数，就可以显示3D齿轮图了，我的3D齿轮图也成巨人啦。

㈦ 初识 D3.js ：打造专属可视化

随着现在自定义可视化的需求日益增长，Highcharts、echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了，这个时候D3的无限定制的能力就脱颖而出。

如果想要通过D3完成可视化，除了对于D3本身API的学习, 关于web标准的HTML, SVG, CSS, Javascript 和 数据可视化的概念以及标准都是需要学习的。这无疑带来了较高的学习门槛，但这也是值得的，因为掌握 D3 后，我们几乎可以实现任何 2d 的可视化需求。

本文通过对D3核心模块分析以及进行具体案例实践的方式，来帮助初学者学习了解D3的绘图思路。

D3的全称是 Data-Driven Documents（数据驱动文档），是基于数据来操作文档的 JavaScript 库，其核心在于使用绘图指令对数据进行转换，在源数据的基础上创建新的可绘制数据， 生成SVG路径以及通过数据和方法在DOM中创建数据可视化元素（如轴）。

相对于Echats等开箱即用的可视化框架来说，D3更接近底层，它可以直接控制原生的SVG元素，并且不直接提供任何一种现成的可视化图表，所有的图表都需我们在它的库里挑选合适的方法构建而成，这也大大提高了它的可视化定制能力。而且D3 没有引入新的图形元素，它遵循了web标准（HTML, CSS, SVG 以及 Canvas ）来展示数据 ，所以它可以不需要依赖其他框架独立运行在现代浏览器中。

在V4版本后，D3的 API 现在已经被拆分成一个个模块，我们可以根据自己的可视化需求进行按需加载。根据泛义可以将D3 API模块分为以下的几大类： DOM操作、数据处理，数据分析转换、地理路径，行为等 。

这里我们主要对 D3-selection 和 D3-scale 模块进行解析：

D3-selection （选择集） 是 D3js的核心模块，主要是用来进行选择元素，设置属性、数据绑定，事件绑定等操作。

选择元素： D3-selection 提供了两种方法来获取目标元素，d3.select()：返回目标元素的第一个节点，d3.selectAll()：返回目标元素的集合，乍一看有点类似原生API 的 querySelector 和 querySelectorAll，但是 d3.select 返回的是一个 selection 对象，querySelector 返回的是一个 NodeList 数组。通过控制台打印的信息，可以看到 selection 下的 groups 存放了所有选择的元素集合，parents 存放了所有选中元素的父节点。

设置属性或者绑定事件： 我们不需要关心 groups 的结构是怎么样的。当调用 selection.attr 或者 selection.style 的时候, selection 中的所有 group 的所有子元素都会被调用，group 存在的唯一影响是: 当我们传参是一个function 的时候，例如 selection.attr('attrName', function(data, i)) 或 selection.on('click', function(data, i)) 时， 传递的 function(data, i) 中, 第二个参数 i 是元素在 group 中的索引而不是在整个 selection 中的索引。

数据绑定： 实际上是给选择的DOM元素的 __data__ 属性赋值，这里提供了3种方式进行数据绑定：

（1）给每一个单独的 DOM 元素调用 selection.datum：d3.select('body').datum(20) 等价于 document.body.__data__ = 20

（2）从父节点中继承来数据, 比如: append , insert , select，子节点会主动继承父节点的数据：

（3） 调用 selection.data() 方法，支持传入装有基础数据类型的数据，也支持传入一个function(parentNode, groupIndex)根据节点索引与数据做映射，data()方法引入了 d3 中非常重要的 join 思想:

绑定 data 到 DOM 元素， 在D3中是通过比较 data 和 DOM 的 key 值来找到对应关系的。 如果我们没有单独设置 key 值，那么默认根据 data 的下标索引来设定，但是当数据顺序发生改变，这个默认下标 key 值 就变得不可靠了，这时我们可以使用 selection.data(data, keyFunction) 中的第二个参数 keyFunction，根据当前的数据返回一个对应的 key 值。通过下面的图例可以看出，不管是有一个还是多个 group（每个group 都是独立的），只要我们保证在任意一个 group 中的 key 值是唯一的，数据一旦发生变化都会反映给对应的 DOM 元素（ update 的过程）：

上面提到的都是data数据和DOM元素数量相同的情况下的数据绑定，那如果data数据和DOM元素数量不相同时，我们来看看 D3 又是如何进行数据绑定的：现在终于可以来介绍 D3-selecion 模块的核心 Join 思想了，这个思想简单来说就是 “不应该告诉D3去怎么创建元素, 而是告诉D3，.selectAll() 得到的 selecion 集合应该和 .data(data) 绑定的数据要怎么一一对应”。

从上图可以看出，在进行 d3.data(data) 数据绑定的时候，会产生三种状态的选择集：

用 Join 的方式来理解意味着，我们要做的事情仅仅是声明 DOM集合和数据集合之间的关系, 并且通过处理三个不同状态的集合 enter、update 、 exit 来描述这种关系。这种方式可以大大简化我们对DOM元素的操作，我们不需要再用 if 和 for 循环的方式来进行复杂的逻辑判断，来得到我们需要得到的元素集合。并且在处理动态数据的时候，可以通过处理这三种状态，轻松的展示实时数据和添加平滑的动态交互效果。

D3-scale （比列尺） 提供多种不同类型的比例尺。经常和 D3-axis 坐标轴模块一起使用。

D3-scale 提供了多种连续性和非连续性的比例尺，总体可以将他们分为三大类：

常用的一些比例尺：

（1）d3-scaleLinear 线性比例尺(连续性输入和连续性输出)

可以看出，调用d3.scaleLinear()可以生成线性比例尺，domain()是输入域，range()是输出域，相当于将domain中的数据集映射到range的数据集中。

使用示例：

映射关系：

（2）d3-scaleTime 时间比例尺(连续性输入和连续性输出)

时间比例尺与线性比例尺类似，只不过输入域变成了一个时间轴。正常我们使用比例尺都是个正序的过程，但是D3也提供了invert()以及invertExtent()方法，我们可以通过输出域中的具体值得出对应输入域的值。

使用示例：

（3）d3.scaleQuantize 量化比例尺(连续性输入和离散性输出)

量化比例尺是将连续的输入域根据输出域被分割为均匀的片段，所以它的输出域是离散的。

使用示例：

映射关系：

（4）d3. scaleThreshold 阈值比例尺(连续性输入和离散性输出)

阈值比例尺可以为一组连续数据指定分割阈值，阈值比例尺默认的 domain：[0.5] 以及默认的 range：[0, 1] ，因此默认的 d3.scaleThreshold() 等价于 Math.round 函数。 阈值比例尺输入域为 N 的话，输出域必须为 N + 1，否则比例尺对某些值可能会返回 undefined，或者输出域多余的值会被忽略。

使用示例：

存在三种映射关系：

a. 当domain和range的数据是 N : N+1

b. 当domain和range的数据是 N : N + 大于1

c. 当domain和range的数据是 N + 大于0 : N

（5）d3.scaleOrdinal 序数比例尺(离散性输入和离散性输出)

与scaleLinear等连续性比例尺不同，序数比例尺的输出域和输入域都是离散的。

使用示例：

存在三种映射关系：

a.当domain和range的数据是一一对应

b.当domain少于range的数据

c.当domain多于range的数据

通过以上的学习，应该对d3是如何操作DOM以及坐标轴的数据映射为相应的可视化表现有了一定的了解，下面我们来实际运用这两个模块，来实现我们常见的可视化图表：柱状图。

（1）首先添加一个SVG元素。

（2）根据我们上面说到 d3.scale 模块以及 d3.axis 模块绘制坐标轴，d3.scaleBand() 叫做序数分段比例尺，类似我们说的 d3.scaleOrdinal() 序数比例尺，但是它支持连续的数值类型的输出域，离散的输入域可以将连续的范围划分为均匀的分段。这里再讲一个细节，在绘制网格的时候，我们并没有额外添加 line 元素来实现，而是通过 d3.axis 坐标轴模块的 axis.ticks() 方法对坐标轴刻度进行了设置，通过 tickSIze() 设置了刻度线长度，来模拟和图表宽度相等的网格线，并且还可以通过 tickFormat() 对Y轴刻度值进行格式化转换。

（3）坐标轴绘制好了后，我们通过数据绑定来绘制与之对应的矩形(rect)元素了。

（4）这个时候柱状图已经基本绘制好了，我们再丰富内容展示，添加标签、标题等提示信息。

（5）最后我们通过给柱子绑定监听事件，实现tooltips的信息浮层交互。

通过对 d3.selection 、d3.scale 以及 d3.axis等模块的学习，我们已经可以绘制出常用的柱状图等图表，我们也可以通过d3提供的其他模块绘制出更加复杂的可视化效果，例如通过 d3-hierarchy(层级模块) 实现层级树图可视化，d3-geo(地理投影) 实现地图数据可视化等，本文讲解的内容还只是D3库的冰山一角。所以等我们掌握了D3后，限制我们实现可视化的不再是技术而是想象力。

㈧ D3.js使用简书

d3.js 是一个可以基于数据来操作文档的 JavaScript 库，可以帮你使用HTML CSS JS SVG Canvas 来展示数据，它结合强大的视图组件来驱动Dom操作.
d3引入的使用

也可以单陆山独使用某个模携悉慎块，比如单独使用d3-selection

可以模块化引入

Selections 允许强大的数据驱动文档对象模型(DOM)：设置attributes,styles,HTML 或 text 内容，选择集的方法通常选择当前的选择当前的选择集或者新的选择集，因此允许进行链式调用。

等价于：

选中符合条件的第一个元素，选择条件为 selector 字符串。如果没有元素被选中则返回空选择集，如果选择器有多个，那就返回匹配第一辩敬个选择集

选择所有与制定的selector匹配的元素，返回一个数组。如果没有元素被选中，则返回的空的选择集。

视图移动以及缩放是一种流行的交互技术 缩放行为通过 d3-zoom 模块来实现，缩放本身与DOM元素无关，可以用于SVG，HTML 或者 Canvas。

创建一个新的缩放行为,并返回该行为。zoom既是一个对象又是一个函数，通过selection.call()来应用到元素本身上

事件绑定 .zoom 双击禁用缩放 以及 禁止滚动齿轮缩放

㈨ 《精通D3.js：交互式数据可视化高级编程》epub下载在线阅读，求百度网盘云资源

《精通D3.js：交互式数据可视化高级编程》（吕之华）电子书网盘下载免费在线阅读

链接：https://pan..com/s/1mhMFTVhz8mlnbixdVFw1fw

提取码：annb

书名：精通D3.js：交互式数据可视化高级编程

作者：吕之华

豆瓣评分：6.7

出版社：电子工业出版社

出版年份：2015-9-1

页数：404

内容简介：

《精通D3.js：交互式数据可视化高级编程》以当前流行的数据可视化技术D3.js为主要内容，分为三大部分，共计13章。第一部分讲述基础知识，第二部分学习制作各种常见图表，第三部分讲解交互式图表及地图的进阶应用。《精通D3.js：交互式数据可视化高级编程》是一个相对完整的D3.js教程，讲解此技术所有重要的知识点，既有基础入门知识，又有相对深入的内容。笔者秉持以下原则：由易到难，循序渐进，图文并茂，清晰易懂。

《精通D3.js：交互式数据可视化高级编程》适合有一定计算机基础的读者，需要熟悉C、C++、Java、JavaScript等至少一门编程语言，能够理解基础的数据结构和算法。

作者简介：

吕之华，广西桂林人，1989年生。2012年毕业于西北农林科技大学软件工程专业，同年获日本政府国家奖学金赴日，就读于日本岩手大学设计与媒体专业，2015年获得硕士学位。目前正攻读博士学位。

2014年与好友创办OUR D3.JS数据可视化专题站，以D3.js为题发表一系列教学文章，获得读者好评。本书即以专题站的文章为基础扩充而成，经过耐心地归纳、整理、调查、修补，内容更加丰富易懂。

作者喜读儒家经典、三国演义等中国古籍，喜看古装剧，热爱中华传统文化。闲暇时练习书法，养气修身。工作之余喜欢旅游、健身、游泳。不喜与人相争，近来潜心研读儒佛道三家学说。

㈩ d3js树图异步加载节点path路径不对

d3js是一个用于前端数则闷据可视化的JavaScript库，其中包含一个用于创建树状图的模块。在使用d3js创建树状图时，我们可以通过异步方式一步步加载节点，以避免数据量过大而导致的性能问题。对于创建树状图时遇到的节点path路径错误问题，可能有以下原因和解决办法：1.数据格式不对：如果数据格式不符合d3js对数据格式的要求，就会导致节点path路径不对。要解决这个问题需要检查数据格式是否正确。2.缺少节点的子节点数据：如果节点的子节点数据没有成功加载到内存中，就会导致节点path路径不正确。要解决这个问题需要检查代码中子节点数据是否正确加载。3.节点ID重复：如果树状图中的节点ID有重复，就会导致节点path路径错误。要解决这个问题，需要确保节点ID不重复。4.图片资源路径错误启盯袜：如果异步加载节点过程中，异步请求的图片资源路径不正确，也会导致节点path路径错误。要解决这个问题，需要确保图片资源路径正确。5.给节点设置的path路径规则不正确：在d3js中，节点path路径通常是基于节点在树中的位置来计算的。如果节点path路径规则不正确，也会导致节点path路径错误。要解决这个问题，需要仔细检查节点path路径规则是否正确，并修改为正确的路径规则。延伸扩展：除了异步加载节点以避免性能问题外，还有一些其他方法可以优化d3js树状图的性能，例如：-针对大数据集，可以使用分层绘制等技巧来减少DOM元素数量，提升绘制效率-预处理数据，将原始数据转化为d3js树状图所需要的格式，避免在绘制过程中进行复杂计悄激算-使用缓存机制，将已经绘制完成的图形缓存起来，避免重复计算-限定动画时间，减少动画时间，提高视觉效果和性能。