为什么 D3 转换不起作用
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
附加矩形,然后选择它们并应用过渡:
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
相关文章:
- css转换高度不起作用
- d3.tree=>转换似乎不起作用
- javascript中的SVG转换在IE 11中不起作用
- -webkit转换在JavaScript旋转动画中不起作用(没有JQuery)
- 为什么d3.js饼图转换不起作用
- Jquery移动转换复选框在Jquery onclick函数()中第二次选中不起作用
- 由 JavaScript 控制的 CSS3 单向转换在按顺序添加/删除类时不起作用
- 转换元素在引导程序中不起作用
- 将JSON对象转换为敲除observable在IE8中不起作用,但在所有其他浏览器中都起作用
- Fabric.js文本转换不起作用
- 转换效果不起作用jquery
- 我正在尝试创建一个带有数据转换的按钮,但不起作用
- Javascript整数到字符串的强制转换不起作用
- 滚动条不可见,CSS3转换在MOZ中不起作用
- Webkit转换没有'不起作用,我该怎么办
- 将 json 转换为 html 表的 JavaScript 不起作用
- 在表中添加时,转换在切换类中不起作用
- 余烬原始 JSON 转换不起作用,但例外
- JavaScript 温度转换功能将不起作用
- 将字符串转换为对象在javascript中不起作用