堆積條形圖轉換

Question

我試圖在水平堆積條形圖中逐條獲取條形轉換。但每個酒吧同時開始。

rects = groups.selectAll('stackedBar') 
    .data(function(d,i) { 
    console.log("data", d, i); 
    return d; 
    }) 
    .enter() 
    .append('rect') 
    .attr('class','stackedBar') 
    .attr('x', function(d) { return xScale(d.x0); }) 
    .attr('y', function(d, i) {return yScale(d.y); }) 
    .attr('height', function(d) { return yScale.rangeBand(); }) 
    .attr('width', 0) 
     .transition() 
     .delay(function(d, i){ 
     console.log('hi', d, i); 
     return i * 500; 
     }) 
     .attr("width", function(d) { return xScale(d.x); }) 
     .attr("x", function(d) { return xScale(d.x0); }) 
     .duration(1000); 

我該如何讓它一個接一個地動畫？謝謝！

jsFiddle

Answer 1

你幾乎沒有 - 你需要使用.delay()來實現這一點，因爲你做了。唯一的問題是，你使用的是嵌套選擇（即在g之內的rect s），你得到的索引是內部選擇的索引。這總是0，因爲每個g只有一個rect。

要使其工作，引用祕密的第三個參數中嵌套的選擇，這是傳遞給父數據中的索引：

.delay(function(d,i,j){console.log('hi',d,j); return j*500;}) 

這會給你的g元素的索引。完整的例子here。