![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
d3应用专题
蚁方阵
千里之行,始于足下,用代码编织技术人生
展开
-
d3选择集合的操作方法(一):select与selectAll
select与selectAll返回的结果都是d3的选择集合,并且都能进行集合运算,唯一不同的是集合的数量,select的数量恒小于等于1,并且总是返回第一个元素(如果存在的话),最令人惊讶的是,select还难以建立集合的父子关系;而selectAll则是选择的所有元素。 假定文档中现有的dom元素如下所示:<body> <ul id="user-list">原创 2016-08-03 23:53:17 · 15625 阅读 · 0 评论 -
D3 GEO应用专题(一):绘制旋转的3D地球
首先查看效果,见下图: 绘制3D地球的步骤如下: 1. 创建投影,并确定初始旋转角度; 2. 创建地球方格生成器; 3. 创建路径生成器path; 4. 渲染地球方格; 5. 渲染初始角度的地图; 6. 创建定时动画,更新投影的旋转角度; 7. 重绘地图;相关初始化代码如下所示:// 创建投影var projection = d3.geoOrthographic()原创 2017-05-30 21:27:58 · 7551 阅读 · 1 评论 -
D3 force(力导向图)研究之一:完美融合拖拽与缩放
本文采用的d3版本为第四版,4.9.1先看实例效果,见图1, 在对节点进行缩放后,依旧能够做到以下两点: 1. 拖拽依旧能够完美做到鼠标跟随与连接关系跟随; 2. 缩放拖拽后,节点的位置依旧正确,利于数据保存; 再看操作失败的例子,见图2。 对现象进行分析,我们可以发现: 1. 鼠标跟随无差异,拖拽操作正常; 2. 节点位置正常; 3. 连线的更新状态错误;继续诊断,我们可以得出这原创 2017-05-29 11:48:05 · 11451 阅读 · 4 评论 -
d3高级应用专题(二):在Canvas中绘制形状
d3第4版添加了对Canvas的支持,在d3.shape包中的每一个形状都可以直接绘制在Canvas上,可以很方便地将SVG的代码应用到Canvas上。原创 2016-08-25 10:51:22 · 5404 阅读 · 0 评论 -
d3事件(四):事件响应是同步的
不同于异步执行的任务队列,事件响应是同步的,只要事件被触发,事件响应的相关代码会立即替换到主线程中进行执行,只有事件响应的代码执行完成后,主线程的代码才会接着执行。实例的Dom结构如下:<div class="container"></div><!-- 用于确认事件确认测试 --><a href="#" class="btn btn-primary" id="btnSure">确认</a>实例原创 2016-08-12 17:38:41 · 790 阅读 · 1 评论 -
D3形状(二):曲线工厂
给定一系列的点,d3.line除了可以将这些点转换为折线路径外,还可以利用曲线工厂,将这些点转换为各类曲线,并能调节这些曲线的参数,改变曲线的形态。原创 2016-08-18 15:14:42 · 4111 阅读 · 0 评论 -
d3高级应用专题(一):canvas与SVG之间的转换
在第4版中,d3新增了d3.path包,可用于将canvas绘制的路径转换为SVG的路径,提高了代码的可移植性,能适应更多应用场景,无论是发挥canvas的高性能特点,还是发挥SVG的高控制性,都能轻松适应。原创 2016-08-07 13:08:02 · 10217 阅读 · 0 评论 -
D3形状(一):直线生成器
在绘制SVG的图形上,D3并不直接在SVG画布上生成图形,而是根据输入的数据产生相关的SVG路径信息,所以,D3所有的形状并非是可见的SVG图形,而是一系列的SVG图形生成器,或者说是一系列的SVG图形生成函数。原创 2016-08-18 12:52:36 · 11522 阅读 · 0 评论 -
d3事件(三):事件的捕获与冒泡
依赖于DOM节点的父子关系,事件的捕获与冒泡都是在父子节点之间传递,用户触发事件后,首先进入捕获阶段,从最顶层的根节点(也就是window)开始依次详细传递,直到查找到事件发生源为止,然后进入事件冒泡阶段,从事件发生源开始依次向上传播事件,流程图如下图所示。 注册事件时,DOM元素监听事件的捕获阶段还是冒泡阶段,只能选择其一,在d3的事件注册中,由on方法的第三个参数(类型原创 2016-08-06 10:25:10 · 6295 阅读 · 1 评论 -
d3事件(二):事件的触发与自定义事件
在第4版中,d3新增了事件的触发函数dispatch,类似于jquery的trigger函数,用于触发dom元素的事件处理函数。并且,d3的选择集合还可以注册任意名称的事件与相关的事件处理函数,即自定义事件。 假定页面中还存在文章”d3事件(一):事件的注册与命名空间”的相关元素,基于此我们进行如下操作。d3.selectAll('button') // d代表绑定的数据,i代表原创 2016-08-05 23:49:44 · 10383 阅读 · 0 评论 -
d3事件(一):注册事件与命名空间
d3将事件的名称划分为两部分,第一部分为事件的类型,如click、input、focus等,也可以是自定义的事件类型,第二部分为事件的生命周期(如start、end等),也可以是命名空间、个人标示符等自定义的字符串,这两部分合起来就成为了一个唯一的事件标示符。一个唯一的事件标识符只能注册一个唯一的事件处理函数,如果注册多个,后面注册的事件处理函数会覆盖之前的事件处理函数。原创 2016-08-05 23:47:55 · 1895 阅读 · 0 评论 -
d3选择集合的操作方法(五):insert与append
insert与append是d3中用于新增元素的方法,它们的用法完全相同,作用也完全相同,唯一的差别在于insert可以指定将新元素插入在什么位置,而append只能将元素添加在末尾。 insert与append的作用过程可分为两步来理解,第一步是新增元素,第二步是选择新增元素,也就是说insert、append操作返回的结果都是新增的元素。 在对页面上已存在的html元素,in原创 2016-08-04 17:41:10 · 12043 阅读 · 0 评论 -
d3选择集合的操作方法(四):sort与order
sort方法只能对带有数据的元素进行排序,因此如果对页面已有的元素但没有绑定数据的元素进行排序,则需要进行预处理,order能将已排序的元素但已改变顺序的元素(如通过raise与lower方法)恢复为排序初始状态,并且性能表现更佳。 依旧假定页面中存在的html元素如下:<ul class="list-group" id="list-group"> <li class="list-grou原创 2016-08-04 17:38:45 · 4991 阅读 · 0 评论 -
d3选择集合的操作方法(三):lower与raise
lower与raise是d3第4版新增的方法,能快速地改变现有DOM元素在父节点中的先后位置。 假定页面中存在的HTML片段如下:<ul class="list-group" id="list-group"> <li class="list-group-item">0001</li> <li class="list-group-item">0002</li> <li cla原创 2016-08-04 17:37:17 · 2170 阅读 · 0 评论 -
D3选择集合核心方法(三):property、attr
描述了d3中property方法与attr方法的区别原创 2016-07-19 15:52:56 · 4944 阅读 · 0 评论 -
d3选择集合核心方法(二):data与datum
比较d3js数据操作两个方法data与datum的差异。原创 2016-07-19 15:15:18 · 7833 阅读 · 0 评论 -
d3选择集合核心方法(一):data、enter、exit
d3的全称是数据驱动文档,核心是将DOM文档的操作转换为对数据集合的操作,把开发人员的聚焦从DOM文档转移到数据集合上,大大简化了DOM文档与数据集合之间的联动操作,所以理解d3的集合操作就是学习d3的关键。本文提供了一种快速理解与记忆d3数据集合操作的方法,并提供了代码示例助于理解。原创 2016-07-30 11:29:31 · 2640 阅读 · 0 评论 -
d3选择集合的操作方法(二):each与call
each与call都能对d3选择的集合进行操作,不同的是,each不仅能对单个元素依次进行操作,并具有所选择dom元素的上下文,而call只能整个集合进行操作,要想获得所选择元素的上下文,只能继续调用each方法。原创 2016-08-03 23:56:47 · 7058 阅读 · 1 评论 -
D3 force(力导向图)研究之二:如何布局超过十万个节点的图谱
基于SVG利用力导向图对节点进行布局,容易导致布局失败的原因有两个: 1. 计算节点位置耗费大量的CPU,导致页面操作冻结; 2. 添加DOM节点到SVG元素时,渲染、重绘会耗费大量的GPU,导致页面直接崩溃;针对以上的情况,可以采取如下策略: 1. 布局过程中,在页面只显示节点; 2. 布局过程中,在页面同时显示节点与连线; 3. 布局过程中不显示节点与连线,布局完成后显示; 4. 将原创 2017-05-29 22:12:52 · 16180 阅读 · 5 评论