D3.js 不更新数据

Posted 2023-02-22

【中文标题】D3.js 不更新数据

【英文标题】：D3.js not updating data

【发布时间】：2015-02-20 03:22:14

【问题描述】：

我正在结合 AngularJS 更新 D3 堆叠条形图。在这种情况下，所有数据最初都是可见的，并且更新会过滤掉不需要的数据。在过去，使用此模型可以毫无问题地工作：

data = [
    name: John Doe, 
    splits: [distance: 1, time: 1234,]
,...]

现在我正在尝试使用此模型为每个堆栈再添加一个柱：

data = [
    name: John Doe
    time: 12345, 
    splits: [distance: 1, time: 1234,]
,...]

我的问题是更新数据。我的计算值已正确重新计算，例如用于缩放的域。 time update 的一行仍然只识别更新前的数据值（为简洁起见，代码 sn-p 被严重截断）：

// Set ranges of values in axes
x.domain(data.map(function(d)  return d.name));
y.domain([ min , max]);

// Y Axis is updated to the correct time range
chart.append('g').attr('class', 'y axis').call(yAxis).selectAll('text').style('font-family','Open Sans').style('font-size', '.9rem'); 

// data join / Select Athlete
var athlete = chart.selectAll(".athlete").data(data),
athdata = athlete.enter(),

console.log(data) // data is correct here

// add container for each athlete
athplace = athdata.append("g")
  .attr("class", "athlete")
  .attr("transform", function(d)   return "translate(" + x(d.name) + ",0)"; )
  .text(function(d)  return d.name),

// ENTER time
athplace.append('rect')
.attr('class', "time")
.attr("width", x.rangeBand())
.attr("y", function(d)  return y(d.time.time); )
.attr("height", 0).transition().duration(300)
.attr("height", function(d)   return height-y(d.time); );

... enter splits & labels

// exit splits & athlete
splitlabels.exit().transition().duration(300).attr('opacity', 0).remove();
splits.exit().transition().duration(300).attr('height', 0).attr('opacity', 0).remove();
athlete.exit().transition().duration(300).attr('width',0).attr('opacity', 0).remove();

console.log(athlete) // data is still correct

// UPDATE time, this chain has the problem with data not being updated. "d" is equal to previous values
athlete.selectAll('rect.time')
.attr("width", x.rangeBand())
.attr("y", function(d)  return y(d.time.time); )
.attr("height", function(d)   return height-y(d.time); );

由于这些错误，更新的列表示错误的数据并产生错误的可视化。我整天都在盯着/测试这个问题，试图将问题与我现在所拥有的问题隔离开来。有 D3 经验的人能给我一些见解吗？

注意：对于那些感兴趣的人，这都在一个 Angular 指令中，我 $watch 用于更改数据值，尽管我 100% 确定这不是问题。

编辑

这是一个JSFiddle，它说明了与我的脚本中相同的错误。所有代码都是直接从显示问题的脚本中提取的。底部的间隔更新模拟了通常会发生的数据交换。

【问题讨论】：

你有小提琴吗？

现在做一个小提琴。

我刚刚在问题底部添加了一个 JSFiddle

【参考方案1】：

我用你的例子玩了一会儿，做了一些可能有用的改变。

首先，我将您的全局var 重新分解到您的update 函数中。通过这样做，我们不会在我们的 x 和 y 轴停止的地方“双重附加”。这似乎是在我们的旧图表之上绘制我们的图表。

但是，修复此问题后，我得到了覆盖在旧图表之上的新图表。为了解决这个问题，我在update 中调用d3.selectAll("svg > *").remove(); 来删除所有附加的SVG 元素和分组，给我们一个“干净的石板”来呈现我们的新图表。这解决了重叠问题。

你提到这是为了简洁起见，所以我希望这个例子可以帮助你的实际应用

---

Updated Fiddle

【讨论】：

小提琴实际上比包含的代码 sn-p 更接近我的实际实现。你的例子正是我希望图表完成的。感谢您抽出宝贵时间解决此问题！

嗨，我也面临同样的问题。我正在从具有新轴和其他属性的服务器获取新数据，数据加载正常并在记录中，按预期显示数据。但是，在图表的更新块上，它是用旧数据绘制的。不处理最新数据。我也通过首先删除“g”节点表格图表然后重新绘制来解决相同的问题。它是什么样的，我们首先需要删除节点，它应该更新元素没有？谢谢，

您是否已发布问题？如果可以的话，我鼓励您使用所有详细信息以及一个工作示例来重现该问题。从您上面的回复中，我没有足够的信息来提出建议，但如果您写一个问题并在此处分享链接，我会很乐意查看，以便我看到它