我是 D3 新手,无法在两个数据集之间顺利转换。这是我目前拥有的 super 简化版本:
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
附加矩形,然后选择它们并应用过渡:
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
关于javascript - 为什么 D3 过渡不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27914624/