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元素和分組，為我們提供了一個“干凈的狀態”以呈現我們的新圖表。 這解決了重疊問題。

您提到這是為了簡潔起見，因此我希望此示例可以為您的實際應用提供幫助

---

更新的小提琴