D3动画问题:轻松
Dav*_*ris 4 html javascript animation interpolation d3.js
编写一个函数来调用一些元素的动画,但是我不能设置任何类型的元素transition.ease().
var circles = canvas.selectAll("circle")
.data(orgs)
.enter().append('circle')
.attr('cx', function(d, i) {
d = orgs[i][0];
return d;
})
.attr('cy', function(d, i) {
d = orgs[i][1];
return d;
})
.attr('r', 5)
.attr('fill', 'rgb(255, 0, 213)');
function update() {
for (var i = 0; i < numBodies; i++) {
var dx = 0;
var dy = 0;
for (var j = 0; j < numBodies; j++) {
if (i!=j) {
dx += orgs[j][0];
dy += orgs[j][1];
}
}
dx = dx/(numBodies - 1);
dy = dy/(numBodies - 1);
orgs[i][0]+= (dx-orgs[i][0])/100;
orgs[i][1]+= (dy-orgs[i][1])/100;
}
circles.transition()
.duration(200)
.ease('linear') //THROWS AN ERROR
.attr('cx', function(d, i) {
d = orgs[i][0];
return d;
})
.attr('cy', function(d, i) {
d = orgs[i][1]
return d;
});
}
我想只使用线性动画插值来提高性能.我遵循此示例中使用的确切语法(如下所示).如果我排除指示的行,我的程序功能完美. 出了什么问题？
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Easing Test</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var dataset = ["linear", "quad", "cubic", "sin", "exp", "circle", "elastic", "back", "bounce"]
width = 960,
height = 500,
xPadding = 300,
yPadding = 30,
r = 20;
var svg = d3.select("body").append("svg")
.attr({
width: width,
height: height
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr({
x: xPadding,
y: function(d, i){ return i * (height/dataset.length) + yPadding; },
dx: -100,
dy: 5,
"font-size": 18
})
.style("text-anchor", "middle")
.text(function(d){ return d; });
svg.selectAll("line")
.data(dataset)
.enter()
.append("line")
.attr({
x1: xPadding,
y1: function(d, i){ return i * (height/dataset.length) + yPadding; },
x2: width-xPadding,
y2: function(d, i){ return i * (height/dataset.length) + yPadding; },
stroke: "darkorange"
})
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("class", function(d){ return d; })
.attr({
cx: xPadding,
cy: function(d, i){ return i * (height/dataset.length) + yPadding; },
r: r,
fill: "orange"
})
.on("mouseover", function(d){
d3.select(this).attr("fill", "green");
})
.on("mouseout", function(d){
d3.select(this).attr("fill", "orange");
})
.on("click", function(d){
d3.select(this)
.transition()
.duration(1000)
.ease(d)
.attr("cx", width-xPadding)
.each("end", function(){
d3.select(this)
.transition()
.delay(500)
.duration(500)
.attr({
cx: xPadding
})
})
})
</script>
</body>
</html>您使用的是哪个版本的d3？如果是v4,请将其替换为
transition.ease(d3.easeLinear)
对于3.x和4.0之间的更改,请参阅此
| 归档时间： |
|
| 查看次数： |
1735 次 |
| 最近记录： |