David Ferris David Ferris - 11 days ago 5
HTML Question

D3 Animation Issue: ease

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;
});
}


enter image description here

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>




Answer

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