当数据源更改时，DOM上的d3图重复
当数据源更改时，DOM上的d3图会重复绘制或更新。
d3.js是一个用于数据可视化的JavaScript库，它通过操作DOM来创建动态、交互式的图表和图形。当数据源发生变化时，d3.js提供了一些方法来更新图表，以反映新的数据。
在d3.js中，数据驱动文档（Data-Driven Documents，简称D3）的核心思想是将数据与DOM元素绑定，并根据数据的变化来更新DOM元素的属性和样式。当数据源更改时，可以通过以下步骤来更新d3图：
- 更新数据：首先，需要更新数据源，将新的数据应用到图表中。这可以通过修改数据数组或对象来实现。
- 选择元素：使用d3.js的选择器方法（如
d3.select()或d3.selectAll()）选择要更新的DOM元素。可以根据需要选择整个图表或特定的元素。 - 绑定数据：使用
data()方法将新的数据绑定到选择的DOM元素上。这将创建一个数据绑定，将每个数据项与相应的DOM元素关联起来。 - 更新属性和样式：使用
attr()、style()等方法来更新DOM元素的属性和样式，以反映新的数据。例如，可以更新柱状图的高度、颜色等。 - 处理数据的进入和退出：如果新的数据项比旧的数据项多，需要处理数据的进入；如果新的数据项比旧的数据项少，需要处理数据的退出。可以使用
enter()和exit()方法来处理这些情况，并添加或删除相应的DOM元素。 - 过渡效果：为了实现平滑的过渡效果，可以使用
transition()方法来定义属性和样式的过渡动画。这样，在数据更新时，图表的变化将更加流畅。
总结起来，当数据源更改时，可以通过更新数据、选择元素、绑定数据、更新属性和样式、处理数据的进入和退出以及添加过渡效果等步骤来重复绘制或更新DOM上的d3图。这样可以确保图表与新的数据保持同步，并提供更好的用户体验。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云D3.js：https://cloud.tencent.com/product/d3js
相关·内容
我正在尝试用D3创建折线图。数据源将在用户操作时更新。stroke-linecap", "round") .attr("d", line);当数据源发生变化时，它会在前一个数据源上复制相同的图形。
浏览 11提问于2020-02-12得票数 1
回答已采纳
1回答
我使用流星、铁路由器和d3.d3用于基于数据的饼图的反应显示，这是我在铁路由器的数据函数中计算出来的。因此，我希望d3在dom就位时运行。我希望在dom完全呈现之后运行d3，并且函数可以访问数据函数的结果。我还尝试使用Templ
浏览 2提问于2014-11-14得票数 2
回答已采纳
1回答
角剑道网格刷新
、、、
场景:单击各种buttons.Able更新角剑道网格，使用新的服务返回值更新网格。 k-rebind="alertGridOptions" k-ng-delay="alertGridOptions.dataSource">在单击刷新按钮时调用的函数scope.alertDataSource.read();
//$('#alertGri
浏览 1提问于2015-03-06得票数 0
1回答
我有一个AngularJS网络应用程序，它在ng-重复中呈现多个D3线条图。即使备份数据没有变化，图形也会不断地重绘。我想要抑制所有重绘事件(或尽可能多)。
重绘不仅仅是随机无限的。当页面上不相关的内容发生更改时，就会触发重绘。支持图表的数据没有任何变化，这就是让我困惑的地方。每当DOM发生变化时，图形似乎都会重新绘制。
浏览 0提问于2016-05-27得票数 1
回答已采纳
1回答
在ng-重复完成后触发D3重绘
、、、、
关于使用AngularJS和D3的应用程序，我有一个有趣的问题。本质上，我有一个基于数组内容的ng重复。在这个数组中有一些对象，这些对象包含一个REST url，它们将定期接触并从其中提取数据。一旦获得这些数据，就会使用D3绘制一个图(数组中的每个对象都有一个图)。
我遇到的问题是通过用户输入向该数组动态添加一个对象，并使绘图工作正确。看来，d3代码跳过了枪，并开始尝试选择还没有呈
浏览 2提问于2014-04-21得票数 3
回答已采纳
我正在学习D3和React的教程。我按照说明渲染了几个文本元素，但由于我在React方面更有经验，所以我想知道，如果我正在构建一个不那么做作的示例，比如一个适当的图表，那么不使用常规的D3语法是否会对性能造成一些影响。下面是他们的例子 const container = useRef(null);
useEffect(() => {if (data && con
浏览 0提问于2020-10-10得票数 0
我可以通过将条件格式设置为“如果值不为空，则将此字段设置为黄色”来突出显示InfoPath中的“新”字段。有问题的表单有大量字段。因此，我不希望对每个字段使用某种类型的标志字段。
浏览 0提问于2010-03-02得票数 2
回答已采纳
当数据源为混合数据时，时间序列图失败，分解维度正在重复。实际上，奇怪的是，先是显示了很多行，然后我删除了图表，然后再次添加，现在正在显示这个(如图像所示)。
浏览 8提问于2021-08-04得票数 1
1回答
} %>例如，上面的代码呈现了一个div，如果用户不是返回用户，我将使用jquery将其作为目标来创建进度条；如果用户是返回用户，则将呈现svg元素，如果该用户是返回用户，则使用D3问题是，我相信我用于创建进度条或制作D3图的函数是在模板中的html被附加到DOM之前被调用的。例如，当获取集合时，将调用我的plotData函数
this.listenTo(this.collection
浏览 1提问于2014-01-24得票数 1
1回答
我正在尝试使用D3在我的web应用程序上呈现一个简单的条形图，该应用程序使用React作为前端。我刚接触D3，在我的网页上显示条形图的时间很紧，所以我认为对我来说最简单的事情就是找到一个使用D3 ()呈现简单条形图的jsfiddle，然后将代码复制并粘贴到我的dashboard.tsx文件中。注意:我之所以选择D3</e
浏览 5提问于2017-05-03得票数 3
我正在使用react和d3，试图创建一个简单的条形图，以便在刷新数据时更新图表。当数据变化时，图表正在更新，但它似乎是在旧图表的基础上分层的。我认为问题在于d3 exit().remove()函数。据我所知，d3的退出方法应该返回一个要删除的项数组，但是当我控制台日志时，我看到了一个“未定义”的数组。我非常感谢任何帮助！下面是代码框：
import React
浏览 0提问于2020-04-20得票数 2
回答已采纳
3回答
我很难理解是如何在angularjs中通过ng重复的表达式跟踪的。文档非常稀少：与：track by $index <input ng-model="value[key]"> 没有(相同的输出
浏览 0提问于2014-03-31得票数 112
回答已采纳
我有一些嵌套的React组件，其内部是一个大型svg图，包含数百个(如果不是数千个) line和rect元素。为了实现一些应用程序范围内的行为和外观变化，我认为应该更改最上面组件的className。我理解这种行为在某种程度上是有意的，在单向呈现流的意义上，但我认为React会更聪明地考虑它可以重用什么，并将DOM更改保持在最低限度。这里的最小示例:如您所见的，SVG中的线条模式在
浏览 2提问于2015-07-21得票数 4
回答已采纳
1回答
我正在开发一个小型JavaScript模板引擎，当模型更改时，我有两种可能的方法来处理DOM的更新：
if (oldValue !这显然更简单，但我担心我会无缘无故地引发重新油漆和再燃。element.textContent = newValue；
请注意，我还通过调用set
浏览 0提问于2017-01-03得票数 6
回答已采纳
我正在处理各种RSS提要，其中包含摘要以及目标页面的URL内容，并尝试使用统一的转换方法。我首先想到要尝试的是XSLT，因为它将以一种标准的方式实现我想要的东西，除了添加新的XSLT样式表以适应唯一格式化的站点和提要内容之外，不会有太多麻烦。问题:在iOS中，XSLT库被认为是“私有的”，即使静态链接到您自己的副本，也会被Apple Store分析工具拒绝。我研究过将样式表和数据注入没有显示的UIWebView的可能性，但这似乎是以“
浏览 0提问于2013-07-12得票数 0
回答已采纳
1回答
我有一个只在客户机上运行Meteor.js的页面。我使用来设置页面URL。我在前面的部分中设置了一个会话变量： Session.set('employee-number', 0);html有一个带有文本框的节<= 57) { }现在，当我设置会话变量时，它会更改一些定价的</em
浏览 2提问于2014-05-15得票数 2
回答已采纳
这得到了连续的数据。如果情节不可见(仍然是托管/呈现的，但隐藏的)，我们希望避免更新它。如果节点被放置在一个未被选中的选项卡上，因此它在窗口中不可见，那么使用isVisible仍然返回true。这将导致每次更新绘图时都会对所选选项卡上的节点进行租借。
即使该节点在应用程序窗口中不可见，这也将计算为true。尽管使用--为com.sun.javafx.scene添加导出来获得对NodeHelper的访问是有效的。使用isVis
浏览 2提问于2017-05-10得票数 1
由于未来的添加，我的PivotTable的源数据范围比我现有的数据更长。为此，在PivotTable过滤器中，我有一个名为“空白”的PivotItem。问题：可以帮助我修改下面的代码以跳过空白页(或者任何人可以告诉我如何摆脱空白的PivotItem)。
浏览 1提问于2016-10-18得票数 1
回答已采纳
我刚开始在我的工作网站上插入它。当我使用ngRepeat指令插入数据，甚至本地数据时，jquery插件看不到加载的数据。还能看到一个空的容器。谢谢。
浏览 2提问于2014-08-09得票数 0
回答已采纳
1回答
当更新firebase时，需要更新数组。下面是代码。
当数组被修改时，我想让模板repeat-dom触发。我可以强制在模板dom-repeat上渲染，但我更喜欢数据绑定的方式。
浏览 0提问于2016-10-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
