开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

d3 selection.exit().remove()不工作，数组始终为_exit (0)

d3 selection.exit().remove()是D3.js库中用于删除不再需要的元素的方法。它通常与数据绑定和更新结合使用，用于处理数据集中元素的进入（enter）、更新（update）和退出（exit）的情况。

在D3.js中，数据绑定是通过将数据集与DOM元素进行绑定来实现的。当数据集中的元素数量少于DOM元素的数量时，就会出现退出的情况。在这种情况下，可以使用selection.exit()方法选择多余的DOM元素，并使用remove()方法将其从文档中删除。

然而，如果d3 selection.exit().remove()不起作用，可能有以下几个原因：

数据绑定问题：请确保正确地将数据集与DOM元素进行绑定，并且数据集中的元素与DOM元素一一对应。可以使用selection.data()方法将数据集与DOM元素进行绑定。
选择器问题：请确保正确地选择要删除的DOM元素。可以使用合适的选择器来选择要删除的元素，例如使用class、id或其他属性选择器。
执行时机问题：请确保在适当的时机调用selection.exit().remove()方法。通常，这个方法应该在数据更新后立即调用，以确保删除多余的DOM元素。
其他问题：如果上述方法都没有解决问题，可能存在其他与代码逻辑相关的问题。可以检查其他与数据绑定和更新相关的代码，以确定是否存在错误。

总结起来，d3 selection.exit().remove()方法用于删除不再需要的DOM元素。如果它不起作用，需要检查数据绑定、选择器、执行时机和其他相关代码，以确定问题所在。以下是一些相关的腾讯云产品和链接，供参考：

腾讯云产品：云服务器（CVM）- https://cloud.tencent.com/product/cvm
腾讯云产品：云数据库 MySQL 版 - https://cloud.tencent.com/product/cdb_mysql
腾讯云产品：云原生应用引擎（TKE）- https://cloud.tencent.com/product/tke
腾讯云产品：云存储（COS）- https://cloud.tencent.com/product/cos
腾讯云产品：区块链服务（BCS）- https://cloud.tencent.com/product/bcs
腾讯云产品：人工智能 - https://cloud.tencent.com/product/ai
腾讯云产品：物联网 - https://cloud.tencent.com/product/iot
腾讯云产品：移动开发 - https://cloud.tencent.com/product/mobdev

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

D3动画

举一个简单的例子：假设目前已有数据['a', 'b', 'c'....]等字母序列，现在希望通过D3,使用SVG将其呈现在页面上 V4 通过selection.enter(), selection.exit...().remove() // exit() 返回数据已经被删除，但是还存在dom的元素 } V5 d3 V5.8.0 引入了一个新的API， selection.join 这个API的优势在于，对于一些比较简单...默认就是 exit().remove()，因此可以免去 } 可以发现，使用selection.join(), 并不需要再手动写selection.exit().remove()，这是因为selection.join...()这个函数默认的exit()函数已经帮你写好了，该API下，d3的Update Pattern可以写为 selection.join( enter => // enter.. , update...exit的工作模式。

8192 0

D3常用API说明，含代码示例

②.data()的工作过程 data()能将数组各项分别绑定到选择集的各元素上，并且能指定绑定的规则。...当数组长度大于元素数量时，enter函数有值,d3已为多余数组项10和2预留了位置以备将来添加元素；当数组长度小于元素数组时，exit函数有值。...的处理方法如果存在多余的元素，但没有与之相对应的数据，即数组长度小于元素个数，那么d3就会使用remove()删除多余的元素。...①.排序 d3中对数组排序可以使用sort()方法，如果不传入比较函数，则默认是按钮d3.ascending(递增)排序，此外也可以定义成d3.descending(递减)排序。排序后会改变原数组。...d3.sum( array[, accessor] )：返回数组的总和，如果数组为空，则返回0 d3.mean( array[, accessor] )：返回数组的平均值，如果数组为空，则返回undefind

4.2K4 0

【D3.js - v5.x】（3）Update & Enter & Exit | 交互 | 布局

但是，有一个问题：**当数组的长度与元素数量不一致（数组长度 > 元素数量 or 数组长度 < 元素数量）时呢？**这时候就需要理解 Update、Enter、Exit 的概念。...如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。...如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit 示意图如下所示： Update 和 Enter 的使用当对应的元素不足时（绑定数据数量 > 对应元素.../ exit.remove(); 结果如下，请大家区分好 update 部分和 exit 部分。...exit 部分的处理办法一般是：删除元素（remove）交互与图表的交互，指在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应。

2111 0

JavaScript d3使用指南

/d3.js" (这个script可以单独成行) 官网:https://d3js.org/ 2. d3基本思想 d3是基于选择数据和绑定数据进行工作的。...”update” 假如对象比数据多,那么d3就会自动创建对象与多余的数据绑定: exit: 没有数据绑定的部分被称为”exit” 优菈刻晴胡桃</p..."#myP") .remove(); 这样就直接删除了id为’myP’的对象。...0)点位于左上角，水平向右为x坐标，垂直向下为y坐标由于画出向上延伸的图标比较困难,那么这里就按照向上画的举出例子。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.7K4 0

D3入门篇 01 | 选择集及数据处理

DOCTYPE html> D3 <link rel="stylesheet" type...() 文本内容，不包含其他元素标签 selection.html() 包括元素内部标签 selection.append(name) name：元素名在选择集末尾添加元素 selection.insert...(name，before) name：元素名before：选择器名称在选择集指定元素前插入元素 selection.remove() 删除选择集选中元素 selection.filter(func...() 元素少于数据，需要让元素多“enter”几个，以此让所有数据都可以绑定到元素 update.exit() 元素多于数据，需要让元素多“exit”几个，因为没有多余的数据来让元素绑定通用处理模板...value map.remove(key) key 非空，删除后，返回 true map.keys() 返回所有 key map.values() 返回所有 value map.entries() 返回所有

1.1K2 0

D3.js-柱形图

data()的工作过程： data()能将数组各项分别绑定到选择集的各元素上，并且能指定绑定的规则。当数组长度与元素数量不一致时，data()也能够处理。...当数组长度大于元素数量时，为多余数据预留元素位置，以便将来插入新元素；当数组长度小于元素数量时，能够获取多余元素的位置，以便将来删除。...在D3中，根据数组长度和元素数量的关系，分别把各种情况归纳如下： update：数组长度 = 元素数量； enter：数组长度 > 元素数量； exit：数组长度 < 元素数量。...处理方法 exitRect.remove(); 文字： var updateText = svg.selectAll("text").data(dataset); var enterText = updateText.enter...处理方法 exitText.remove(); 三、坐标轴比例尺分为：定量比例尺（定义域是连续的）和序数比例尺（定义域是不连续的）。

1.4K4 1

D3 介绍

这是 D3 以数据为核心的一个示意图，可以简单这样来解释：有一个选择区（selection），存在若干节点（node），因此可以容纳若干数据（data），最大可容纳数据的量等于节点的个数，即数据和节点一一对应....attr('cy', 0) .style('opacity', 0) .style('fill', 'red')....remove(); //离开选择区的数据，exit }; render(0); var changeDataset...… p.exit().remove(); 转换，而非呈现（Transformation, not Representation）：D3 并不是一个新的图像呈现类库，因此它和 Raphaël 是不一样的。...其实，我倒觉得还好，d3 功能比较强大，但是很多人不喜欢的主要原因是，这个东西是不符合人类常规思维的，它是那种以数据（以及容纳数据的容器）为核心的代码风格，以这个折线图为例：如果用 SVG 来实现它的话

1.3K2 0

数据可视化工具d3_前端3d可视化

目前D3已经更新到V5版本。因为原理是差不多的，所以仍然以V3版本为例作讲解。...按照以上代码，比例尺的定义域 domain 为：[0.9, 3.3] 比例尺的值域 range 为：[0, 300] 因此，当输入 0.9 时，返回 0；当输入 3.3 时，返回 300。...第10章理解 update()、enter()、exit() Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。...exit() 当对应的元素过多时（绑定数据数量 < 对应元素），当对应的元素过多时，通常要删除元素，使之与绑定数据的数量相等。后面通常要跟 remove 操作。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

12.7K4 0

知识图谱可视化前奏之d3.js

知识图谱可视化前奏之d3.js 0.说在前面1.d3.js初识2.绘制完整的柱形图3.让图表动起来4.浅析Update、Enter、Exit5.交互式操作6.作者的话 0.说在前面这两天一直在更机器学习及...D3强调Web标准，为您提供现代浏览器的全部功能，而无需将自己与专有框架联系起来，将强大的可视化组件和数据驱动方法结合到DOM操作中。...如果需要手动添加这些元素就太麻烦了，为此，D3 提供了一个组件：d3.axisBottom()。它为我们完成了以上工作。--> <!....text(function(d){ return d; }); 4.浅析Update、Enter、Exit what is Update and Enter如果数组为...}); //exit部分的处理通常是删除元素 // exit.remove(); output update 3 exit exit 5.交互式操作

13.2K4 0

VBA 在 Excel 中的常用操作

文件操作引用打开的工作簿使用索引号（从 1 开始） Workbooks(1) 使用工作簿名称 Workbooks("1.xlsx") 创建一个 EXCEL 工作簿对象 Dim wd As Excel.Application...Range("D3:F4,G10") '引用多个区域 Range("2:2") '引用第二行 Range("2:12") '引用第二行到第十二行 Range("D:A") '引用第 A 到 D 列 Rows...判断单元格的 value 是否为 ““。...退出主要使用 Exit 表达式。...Exit { Do | For | Function | Property | Select | Sub | Try | While } 参见 Exit Statement (Visual Basic)

3.4K1 0

VBA 在 Excel 中的常用操作

文件操作引用打开的工作簿使用索引号（从 1 开始） Workbooks(1) 使用工作簿名称 Workbooks("1.xlsx") 创建一个 EXCEL 工作簿对象 Dim wd As Excel.Application...Range("D3:F4,G10") '引用多个区域 Range("2:2") '引用第二行 Range("2:12") '引用第二行到第十二行 Range("D:A") '引用第 A 到 D 列 Rows...Scripting.Dictionary") ' 新增，各种类型都可以，包括 Dictionary dict.Add "hello", "world" ' 数量 dict.Count ' 删除 dict.Remove...判断单元格的 value 是否为 “”。...退出主要使用 Exit 表达式。 Exit { Do | For | Function | Property | Select | Sub | Try | While }

3.2K2 0

JavaSE学习总结（七）—— 集合

Collection 接口存储一组不唯一，无序的对象 List 接口存储一组不唯一，有序（插入顺序）的对象，类似数组 ? Set 接口存储一组唯一，无序的对象 ?...{ System.out.println(i+"="+list1.get(i)); } //移除 //将下标为0...的元素移除，当前面的元素移除时后面补上 list1.remove(0); System.out.println("list1的第1个元素值为："+list1.get(0)...字典（Dictionary） 4.1、HashMap 以哈希表数据结构实现，查找对象时通过哈希函数计算其位置，它是为快速查询而设计的，其内部定义了一个hash表数组（Entry[] table），元素会通过哈希转换函数将元素的哈希地址转换成数组中存放的索引...; System.exit(0); break; case 7: menu(); break

1K8 0

D3.js 力导向图的显示优化（二）- 自定义功能

首先，我们用 d3-force 力导向图来构建一个简单的关联网 this.force = d3 .forceSimulation() // 为节点分配坐标...没错，还是上篇提及的 D3.js 的 enter() 及没提到的 exit() 摘自文档的描述：数据绑定的时候可能出现 DOM 元素与数据元素个数不匹配的问题， enter 和 exit 就是用来处理这个问题的...于是笔者直接在 nodes 数据里删除选中的节点数据 node，然后根据官方用法 d3.select(this.nodeRef).exit().remove() 移除多余的元素，好的，我们现在来看看这样做会带来了什么...笔者又仔仔细细地看了一遍上面的文档描述，灵光一闪，来，先打印下 exit().remove() 的节点，看看到底它 remove 哪些节点？...然而 D3.js 在获取数据长度变化之后，以 exit() 为例，对单个数据的处理方法是根据长度的减量 N 截取数据数组位置中最后 N 位到最后一位区间的所有元素，enter() 则相反，会在数组位置中最后一个元素后面增加

4.2K5 0

【D3.js - v5.x】（1）选择集 | 绑定数据 | 插入元素 | 删除元素

D3 中是通过以下两个函数来绑定数据的： datum()：绑定一个数据到选择集上 data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定相对而言，data() 比较常用。...i 代表索引，代表数据的索引号，从 0 开始。例如，上述例子中：第 0 个元素 apple 绑定的数据是 China。...data() 有一个数组，接下来要分别将数组的各元素绑定到三个段落元素上。...当 i == 1 时， d 为 I like cat。当 i == 2 时， d 为 I like snake。...即可，例如： d3.select('body').select(".myid").remove() 删除指定 class 的段落元素。

1991 0

Python -- collection

g g f h s s s Process finished with exit...python.py" {'k3': 3, 'k2': 2, 'k1': 1, 'k5': 5} 1 2 3 5 Process finished with exit...: Required argument 'key' (pos 1) not found def setdefault(self, k, d=None): # 添加元素设置默认值，默认第二个参数为None... deque(['4', '2']) def remove(self, value): # 删除某一元素，需要加参数 >>> d3.remove...('4') >>> d3 deque(['2']) def reverse(self): # 反转 >>> d3

4431 0

从零开始再造打爆李世石的AlphaGo：创造能下围棋的机器人

现在我们实现方法非常简单，就是随便选择一个不违反规则的地方落子，只要机器人能避开棋眼以及防止出现ko情形。...一种常用算法是对每一步落子进行编码，然后把落子编码与棋盘编码做异或运算，具体过程如下，首先我们面对一个空白棋盘，给它的编码为0： ?...于是我们做一次异或运算 0x00 XOR 0x1001001 = 0x1001001，接着白棋落子在D3，我们对此进行的编码为0x101000： ?...于是我们再次与前面数值做异或运算: 0x1001001 XOR 0x101000 = 0x100001，如果此时我们把白子拿走，于是棋盘返回到上一个状态，由于位置D3上的变化被我们编码为0x101000...由此我们比对数值就可以发现棋盘状态是否产生了回滚，不需要像原来那样进行一次二维数组的扫描比对，如果棋盘对应的二维数组维度为n，一次扫描比对需要的时间是O(n^2)，但是一次数值比对的时间是O(1)，由此在效率上能够提高两个数量级

6624 1

《使用D3设计交互式图表》简读笔记|可视化系列31

像面粉可以做出各种糕点而不是直接提供面条；•擅长矢量图形，缩放不损失图形精度，不擅长位图和瓦片，不擅长探索型可视化；•作为HTML文档，不隐藏原始数据，如果不想共享数据，为什么还要将它们可视化呢？...D3本质上还是JavaScript，这意味着我们可以用原生JavaScript代码实现讲到的所有功能，但D3对作了很好的封装，大大减轻了做可视化的工作量并应对各种需求。...通过data(vals[,key])绑定数组vals中的每一项到选中的元素，key是一个用于指定绑定规则的函数。...实际上d3提供了绘制坐标轴的接口，省去了很多工作量。在D3的v5版本中，通过d3.axisBottom(scale)绘制x轴(水平方向)、d3.axisLeft(scale)绘制y坐标轴。...var scale = d3.scale.linear().domain([100, 500]).range([0, 100]);比例尺scale将输入数据从[100,500]输出的时候限制在[0,100

3.7K2 0

Excel公式技巧87：使用FREQUENCY()求非连续区域上的条件平均值

问题的提出：我们有一些有关在客户服务团队中工作的三个人的电话呼叫信息，如下图1所示。 ?...错误，因为AVERAGEIF函数无法处理非连续区域： =AVERAGEIF((B3:B7,D3:D7,F3:F7),"0") 要获取不连续的区域的平均值，我们通常可以使用SUM/COUNT函数，如下所示...试图使用COUNTIF函数替换COUNT函数来忽略0值，但是COUNTIF函数不能用于不连续区域，因此公式将返回#VALUE!...解决方法要获得正确的答案，可以使用下面的公式： =SUM(B3:B7,D3:D7,F3:F7)/INDEX(FREQUENCY((B3:B7,D3:D7,F3:F7),0),2) 注意，这不是一个数组公式...公式中： FREQUENCY((B3:B7,D3:D7,F3:F7),0) 其中，data_array是(B3:B7,D3:D7,F3:F7)，bins_array是0，将返回一个包含两个数值的数组，第一个值是

1.7K2 0

在线算命网站源码|算命小程序源码带uniapp

[Y/N] ') 　　reply = input() 　　if reply == 'Y': 　　Magic8Ball() 　　elif reply == 'N': 　　exit() 　　else: 　　...通常，函数被设计为多次运行。可以在加载应用程序时调用函数来运行，或者从用户输入或从另一个函数等调用。例如，您可能正在编写一个计算机游戏，其中包含一个函数，比如失去健康或增加分数等。　　...– 如果没有任何明显的反馈，用户可能会认为界面不工作。我的感觉是界面需要始终响应用户的输入。...首先将其添加到 CSS：　　@keyframes fade { 　　0% { 　　opacity: 0; 　　} 　　100% { 　　opacity: 1; 　　} 　　} 　　.fade-animation...* 确保将这段代码放在 getFortune 函数中：　　// Remove animation class (if it has it) 　　fortuneHolder.classList.remove

3K6 2

d3从入门到出门

元素删除 remove 将选定的元素删除示例: d3.select("p").remove //选择第一个p元删除链式操作 d3与jQuery有一样的链式操作, 只要操作合法你可以一直链接下去...data([1,2,3]) .text((d, i) => d) // 修改后的内容如下 ...省略不相关内容 1 2 3 update, enter, exit...d3.max(data)]) // 真实距离大小范围，一般是展示区长宽 .range([0, 500]); console.log(scale(20))...console.log(scale(800)) console.log(scale(1000)) 输出 10 400 500 离散缩放 // 常用于选区颜色 var index = [0, 1, 2...scale = d3.scaleLinear() .domain([d3.min(data), d3.max(data)]) .range([0,

3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭