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