D3.js对堆叠条形图进行动画更新

Question

随着底层数据的更改，我正在尝试更新带有转换的堆叠条形图。它每次调用相同的"render"函数，并且在不涉及转换时工作良好。但是，我想为值的变化设置动画，从当前状态转换到下一状态。

我已经在一定程度上解决了这个问题，但我觉得我的解决方案很笨拙——希望有一种更好的方法来处理堆叠条形图。

我的方法是做以下事情：

1. 加载数据
2. 加载初始条件(转换要求)
3. 加载最终条件(在过渡内)
4. 将当前数据复制到另一个数组中：prevData
5. 间隔后重新加载数据

使用上述方法，如果prevData有值，则使用这些值来设置初始条件。我的问题是，找到和设置初始条件感觉非常笨拙：

if (prevData.length > 0) {
//get the parent key so we know who's data we are now updating
var devKey = d3.select(this.parentNode).datum().key;
//find the data associated with its PREVIOUS value
var seriesData = seriesPrevData.find(function (s) { return (s.key == devKey); })
if (seriesData != null) {
//now find the date we are currently looking at
var day = seriesData.find(function (element) { return (element.data.Date.getTime() == d.data.Date.getTime()); });
if (day != null) {
//now set the value appropriately
//console.debug("prev height:" + devKey + ":" + day[1]);
return (y(day[0]) - y(day[1]));
}
}
}

我所做的就是找到正确的键数组(由d3.stack()创建)，然后尝试找到合适的前一个数据条目(如果存在的话)。然而，搜索父节点，并在数组中搜索以找到所需的键和适当的数据元素，感觉非常冗长。

所以，我的问题是，有更好的方法吗？还是其中的一部分？

1. 查找与此元素关联的以前绑定的数据值，或在函数中更改之前的当前值
2. 查找正在更新的当前密钥的更好方法，而不是使用：d3.select(this.parentNode)？我试过传递关键值，但似乎做得不对。我所取得的最好成绩是将一个关键函数传递给父函数，并以上述方式查找它

很抱歉发了这么长的帖子，我只是花了一整天的时间来制定我的解决方案，因为我真正需要的只是一个项目以前的值，这让我很沮丧。必须做所有这些"体操"才能得到我需要的东西，这似乎非常"不"D3.js：-)

感谢

Answer 1

下面是一个动画条形图的简单示例。它将对数据集的两个不同版本进行迭代，以展示如何使用d3非常容易地处理底层数据中的更改。(在本例中)不需要为转换/动画进行任何手动数据准备。

var data = [
[1, 2, 3, 4, 5],
[1, 6, 5, 3]
];
var c = d3.select('#canvas');
var currentDataIndex = -1;
function updateData() {
// change the current data
currentDataIndex = ++currentDataIndex % data.length;
console.info('updating data, index:', currentDataIndex);
var currentData = data[currentDataIndex];

// get our elements and bind the current data to it
var rects = c.selectAll('div.rect').data(currentData);
// remove old items
rects.exit()
.transition()
.style('opacity', 0)
.remove(); 
// add new items and define their appearance
rects.enter()
.append('div')
.attr('class', 'rect')
.style('width', '0px');
// change new and existing items
rects
// will transition from the previous width to the current one
// for new items, they will transition from 0px to the current value
.transition()
.duration('1000')
.ease('circle')
.style('width', function (d) { return d * 50 + 'px'; });

}
// initially set the data
updateData();
// keep changing the data every 2 seconds
window.setInterval(updateData, 2000);

div.rect {
height: 40px;
background-color: red;
}
div#canvas {
padding: 20px;
border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="canvas">  
</div>