d3代码如何改造成update结构(恰当处理enter和exit)
d3的enter和exit
网上有很多blog讲解。说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661
如何把自己的rude绘图代码,进行精致化(update)
不多比比,上代码示例:
d3.selectAll('.circle_group').children().remove();
var circle_group = d3.selectAll('.circle_group')
.data(circleData)
.enter().append('g')
.attr('class', 'circle_group brushNode')
.attr('transform',
function (d) {
return 'translate(' + d.x + ',' + d.y + ')';
})
.on('click', function (d) {
if (shiftKey) {
//标记当前点
d3.select(this).classed("selected", function (d) { d.selected = !d.selected;
d.previouslySelected = !d.selected;
return d.selected;
}) //阻止事件冒泡
d3.event.stopPropagation();
}
})
.on("contextmenu", function (node) {
contextmenu("Rmenu");
}) circle_group.append('circle')
.attr('r', function (d) {
return d.r;
})
.style("fill", function (d) {
return color20(d.index);
}) ;
circle_group.append('text')
.attr("dy", ".35em")
.attr("text-anchor", "middle")//在圆圈中加上数据
.style('fill', function (node) {
return '#555';
})
.attr("y", -7)
.text(d => d.text); circle_group.call(d3.drag()
//定义了元素拖拽行为的原点,设置为圆的圆心位置可以避免明显的元素跳动, 与d3v3中的origin方法类似。
.subject(function () {
var thisData = d3.select(this);
return {
x: thisData.datum().x,
y: thisData.datum().y
};
})
.on("start", dragstarted)
.on("drag", dragmove)
.on("end", dragended));
很明显,新手图省事都是这么绘图的。就绘图结果来看,如果你不加动画一点问题都没有,只要一加动画过渡动画,所有的图形都是从无到有的过程,而我们想看的是,如果点更新的话,能看到他从哪(位置)更新到哪(位置)。(这里就不加动画过渡了,就一行代码的事.transition().duration(300) )。
改造如下:
//这部分代码是有则改之,无则添加的功能
const circle_data=d3.selectAll('.circle_group').data(circleData) //更新部分,如果你数据的数目没变,那circle_data.size()=你数据内容改变的数目,你可以把circle_data考虑成update部分就行,这样编代码准没错
.attr('transform', //首次运行的时候,因为没有元素circle_data.size()=0, 所以这个transform不会运行到
function (d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
const circle_enter=circle_data.enter().append('g') //add 部分,首次运行的时候,circle_enter.size()=全部元素,所以在circle_enter进行所有的初始化设置操作
.attr('class', 'circle_group brushNode')
.attr('transform',
function (d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
circle_data.exit().remove(); // 当你删一些数据的时候, .exit().size()>0 circle_enter.on('click', function (d) {
if (shiftKey) {
//标记当前点
d3.select(this).classed("selected", function (d) { d.selected = !d.selected;
d.previouslySelected = !d.selected;
return d.selected;
}) //阻止事件冒泡
d3.event.stopPropagation();
}
})
.on("contextmenu", function (node) {
contextmenu("Rmenu");
}) circle_enter.append('circle') //add
.attr('r', d=>d.r)
.style("fill", function (d) {
return color20(d.index);
});
circle_data.select('circle') //update,这里不要append ,因为元素已经在那了(enter().append()过了)。当然首次运行(视图首次显示)的时候,这几句代码是运行不到的。
.attr('r', d=>d.r)
.style("fill", function (d) {
return color20(d.index);
}); circle_enter.append('text') //add
.attr("dy", ".35em")
.attr("text-anchor", "middle")//在圆圈中加上数据
.style('fill', function (node) {
return '#555';
})
.attr("y", -7)
.text(d => d.text);
circle_data.select('text') //update 不要append
.text(d => d.text); const drag=d3.drag()
//定义了元素拖拽行为的原点,设置为圆的圆心位置可以避免明显的元素跳动, 与d3v3中的origin方法类似。
.subject(function () {
var thisData = d3.select(this);
return {
x: thisData.datum().x,
y: thisData.datum().y
};
})
.on("start", dragstarted)
.on("drag", dragmove)
.on("end", dragended);
circle_enter.call(drag);
circle_data.call(drag); //update 注意,这里一定要重新绑定一下,这里涉及到drag的初始化(subject用于初始化drag拖动点的初始位置)
敲黑板
1、更新部分的所有与位置有关的事件(比如d3.drag()的初始位置)要重新绑定,否则会出现不可预料的结果。
2、update部分与数据有关的attr,style要重新设置,这时就不用append了。(因为这个元素既然有了,你已经在之前的.enter().append().append(其他元素)添加过了,这里只需要更新一下即可。)。一些固定的attr,style就不用重复设置了(之前enter已经绑定过了)
d3代码如何改造成update结构(恰当处理enter和exit)的更多相关文章
- D3.js 理解 Update、Enter、Exit
Update.Enter.Exit 是 D3 中三个非常重要的概念,它处理的是当选择集和数据的数量关系不确定的情况. 一.什么是 Update.Enter.Exit svg.selectAll(&qu ...
- D3.js:Update、Enter、Exit
Update.Enter.Exit 是 D3 中三个非常重要的概念,它处理的是当选择集和数据的数量关系不确定的情况. 如果数组为 [3, 6, 9, 12, 15],将此数组绑定到三个 p 元素的选择 ...
- D3.js系列——动态效果和Update、Enter、Exit的理解
一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...
- D3.js的v5版本入门教程(第四章)—— 理解Update、Enter、Exit
D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用d ...
- 创建TFS团队项目时自动建立代码库的文件夹结构
很多客户都跟我提过一个这样的需求,即需要在创建团队TFS项目时,自动创建起源代码库的文档结构,例如类似下列结构的文件夹: <teamProject> |- DEVELOPMENT ...
- Uboot优美代码赏析1:目录结构和malkefile分析
Uboot优美代码赏析1:目录结构和malkefile分析 关于Uboot自己选的版本是目前最新的2011.06,官方网址为:http://www.denx.de/wiki/U-Boot/WebHom ...
- 《Three.js 入门指南》3.0 - 代码构建的最基本结构。
3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...
- D3.js的基础部分之选择集的处理 enter和exit的处理方法 (v3版本)
上一节给大家讲述额绑定数据的原理.当数组的长度与元素的数量不一致时,有enter部分和exit部分,前者表示存在多余的数据,后者表示存在多余的元素.本节将给大家介绍如何处理这些多余的东西,最后会给大家 ...
- 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...
随机推荐
- selenium的显示等待和隐式等待区别
1.selenium的显示等待 原理:显式等待,就是明确的要等到某个元素的出现或者是某个元素的可点击等条件,等不到,就一直等,除非在规定的时间之内都没找到,那么就跳出Exception.(简而言之:就 ...
- 使用canvas保存网页为pdf文件支持跨域
前言 之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载. 前文 Canvas截图网页为图片:https://www.cnblogs.com/bubub ...
- Windows常用软件
目录 Uninstall Tool FACapture Unlocker Uninstall Tool Uninstall Tool 这是一款可以彻底删除应用的软件,能连通注册表内容一起删除. FAC ...
- Centos6.5安装Seafile,遇到的问题处理记录。
问题1:启动Seafile安装脚本时,提示找不到MySQL-python模块,使用yum安装成功也提示未安装该软件包 问题1解决方法:需要通过 python 的工具pip来安装MySQL-python ...
- PHP学习总结(7)——PHP入门篇之PHP注释
注释 在PHP中也有注释语句:用双斜杠(//)来表示.其它语言中,Html中使用<!--注释语句-->,CSS中使用/*注释语句*/.如下面代码: <?php//输出hi,imooc ...
- 洛谷 P1124 文件压缩
P1124 文件压缩 题目背景 提高文件的压缩率一直是人们追求的目标.近几年有人提出了这样一种算法,它虽然只是单纯地对文件进行重排,本身并不压缩文件,但是经这种算法调整后的文件在大多数情况下都能获得比 ...
- [using_microsoft_infopath_2010]Chapter7 从SharePoint列表和商业连通服务取数据
本章概要: 1.SharePoint2010列表作为数据源 2.从SharePoint中集中的数据连接库维护数据中获益 3.配置使用外部的项目选择器控件和商业联通服务从外部系统增加信息到你的表单中
- Bata版本
一.团队成员 1)冯鹏(组长) 201731062617 2)鲜泽 201731062612 3)李家豪 201731062614 4)郭经伟 201731062615 5)程前勇 2017310 ...
- 获取sqlserver数据字典的完整sql
SELECTsysobjects.name AS 表名称 , --------------as 的作用:为字段起一个别名 --sysproperties.[value] AS 表说明 , ------ ...
- Oracle学习系类篇(四)
.分析函数 分析函数oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组,然后计算基于组的邹忠统计值,并且每一组的每一行都可以返回一个统计值. 分析函数和聚合函数的不同之处 ...