Menu
Writing a function to animate some elements when it is called, however I cannot set any kind of 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;
});
}
I want to just use the linear animation interpolation to improve performance. I am following the exact syntax used in this example (shown below). If I exclude the indicated line, my program functions perfectly. What is going wrong?
<!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>
492
What version of d3 are you using? If it's v4, replace it with
transition.ease(d3.easeLinear)
For changes between 3.x and 4.0, see this
API Reference
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
