[英]Why isn't D3 transition working
我是D3的新手,無法順利在兩個數據集之間進行轉換。 這是我目前所擁有的超級簡化版:
var h = 500;
var w = 500;
var data = [
10,
15,
12,
9
]
var data_two = [
6,
15,
20,
19,
11
]
var vis = d3.select('body')
.append('svg')
.attr({
height: 500,
width: 500
})
.append('g');
function buildChart(data) {
var square = vis.selectAll('rect')
.data(data, function(d) { return d })
square
.transition()
.duration(1000)
.attr({
x : function(d, i) { return 0 }
})
square
.enter()
.append('rect')
.attr({
height : function(d, i) { return 10 },
y : function(d, i) { return i * 15 },
width : function(d, i) { return d * 5 },
x : function(d, i) { return 0 }
});
square
.exit()
.remove();
}
buildChart(data);
setTimeout(function() {
buildChart(data_two)
}, 1000)
jsfiddle: http : //jsfiddle.net/ncakby1a/
我希望得到的結果是在一秒鍾的延遲之后使這些條平滑地動畫到新的寬度。 相反,他們只是跳到了新狀態,我不確定為什么。 提前致謝!
您的buildChart
函數始終會放置新的柱,它永遠不會根據data_two
的數據更新使用data
放置的data_two
。 要解決此問題,請先使用data
附加矩形,然后選擇它們並應用過渡:
var h = 500;
var w = 500;
var data = [
10,
15,
12,
9,
3
]
var data_two = [
6,
15,
20,
19,
11
]
var vis = d3.select('body')
.append('svg')
.attr({
height: 500,
width: 500
})
.append('g');
vis.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
x: function(d, i){ return 0;},
y: function(d, i){ return i * 15;},
height: function(d){ return 10;},
width: function(d){ return d * 5;}
})
vis.selectAll('rect')
.data(data_two)
.transition()
.duration(1000)
.delay(1000)
.attr({
x: function(d, i){ return 0;},
y: function(d, i){ return i * 15;},
height: function(d){ return 10;},
width: function(d){ return d * 5;}
});
這是一個工作的JSfiddle
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.