D3.js不更新数据

Question

我正在结合AngularJS更新D3堆叠条形图。 这样，所有数据最初都是可见的，而更新会过滤掉不需要的数据。 过去，使用此模型一直没有问题：

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

现在，我尝试使用此模型向每个堆栈添加一个栏：

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

我的问题是更新数据。 我的计算值已正确重新计算，例如缩放域。 用于time更新的行仍仅识别更新之前的数据值（为简洁起见，代码片段被大量截断）：

// 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 ，它说明了与我的脚本相同的错误。 所有代码均直接从显示问题的脚本中提取。 底部的时间间隔更新模仿了通常会发生的数据交换。

Answer 1

我对您的示例进行了一些操作，并进行了一些可能有用的更改。

首先，我在update函数内部重构了全局变量var 。 这样，我们就不会在x和y轴中断的地方“两次追加”。 这似乎是在旧图表的上方绘制了我们的图表。

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

您提到这是为了简洁起见，因此我希望此示例可以为您的实际应用提供帮助

---

更新的小提琴