我正在使用AngularJS更新一个D3堆叠条形图。在此过程中,所有数据最初都是可见的,并且更新会筛选掉不需要的数据。过去,使用以下模型一直可以正常工作:
现在我正在尝试使用这个模型为每个堆栈添加一个额外的条形图:
我的问题是更新数据。我的计算值被正确地重新计算,例如用于缩放的域。一个用于时间更新的行仍然只能识别更新前的数据值(代码片段已经大幅缩短):
由于这些错误,更新的列代表了错误的数据并生成了错误的可视化。我一整天都在盯着/测试这个问题,试图将问题隔离到现在的程度。有没有更有经验的D3人士能给我一些见解?
注意:对于那些感兴趣的人,这全部都是在Angular指令中完成的,我会$watch数据值的变化,尽管我100%确定这不是问题所在。
编辑
这里是一个JSFiddle,展示了与我的脚本中相同的错误。所有代码都是从出现问题的脚本直接提取的。底部的间隔更新模拟了通常会发生的数据交换。
data = [{
name: John Doe,
splits: [{distance: 1, time: 1234},]
},...]
现在我正在尝试使用这个模型为每个堆栈添加一个额外的条形图:
data = [{
name: John Doe
time: 12345,
splits: [{distance: 1, time: 1234},]
},...]
我的问题是更新数据。我的计算值被正确地重新计算,例如用于缩放的域。一个用于时间更新的行仍然只能识别更新前的数据值(代码片段已经大幅缩短):
// 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,展示了与我的脚本中相同的错误。所有代码都是从出现问题的脚本直接提取的。底部的间隔更新模拟了通常会发生的数据交换。