I've been experimenting with animation.

It's very simple to animate an object across the canvas by clearing the entire canvas and redrawing it in a new location every frame (or "tick"):

// Inside requestAnimationFrame(...) callback

// Clear canvas
canvas.selectAll('*').remove();

// ... calculate position of x and y
// x, y = ...

// Add object in new position
canvas.append('circle')
    .attr('cx', x)
    .attr('cy', y)
    .attr('r', 10)
    .attr('fill', '#ffffff');

Is this a bad practice or am I doing it right?

For instance, if you were making a screen full of objects moving around, is it better practice to animate them by updating their attributes (e.g., x, y coordinates) in each frame?

Or, perhaps there is some other method I'm entirely unaware of, no?

Note: my animation might include 100-200 objects in view at a time.

I've been experimenting with animation.

It's very simple to animate an object across the canvas by clearing the entire canvas and redrawing it in a new location every frame (or "tick"):

// Inside requestAnimationFrame(...) callback

// Clear canvas
canvas.selectAll('*').remove();

// ... calculate position of x and y
// x, y = ...

// Add object in new position
canvas.append('circle')
    .attr('cx', x)
    .attr('cy', y)
    .attr('r', 10)
    .attr('fill', '#ffffff');

Is this a bad practice or am I doing it right?

For instance, if you were making a screen full of objects moving around, is it better practice to animate them by updating their attributes (e.g., x, y coordinates) in each frame?

Or, perhaps there is some other method I'm entirely unaware of, no?

Note: my animation might include 100-200 objects in view at a time.

• javascript
• canvas
• d3.js

2 Answers 2

It is better to move them, because that is the only way you can animate without errors.

In d3.js the idea is that the objects are data-bound. Clearing and redrawing the 'canvas' is not the correct approach. Firstly its not a canvas, its a web page, and any clearing and redrawing is handled by the browser itself. You job is to bind data to SVG, basically.

You need to make use of the d3 events, enter, exit, update which handles how the SVG behaves when the databound underlying data is modified and let d3 handle the animations.

the most simple example is here: https://bost.ocks/mike/circles/

1. select your elements, and store the selction in a variable

var svg= d3.select("svg");

var circles = svg.selectAll('circle');

2. now we need to databind something to the circle.

var databoundCircles = circles.data([12,13,14,15,66]);

This data can be anything. Usually I would expect a list of object, but these are simple numbers.

3. handle how things 'are made' when data appears

databoundCircles.enter().append('circle');;

4. handle what happens to them when data is removed

databoundCircles.exit().remove()

5. handle what happens when the data is updated

databoundCircles.attr('r', function(d, i) { return d * 2; })

this will change the radius when the data changes.

And recap from that tutorial:

1. enter - ining elements, entering the stage.

2. update - persistent elements, staying on stage.

3. exit - outgoing elements, exiting the stage.

so in conclusion: don't do it like you are. Make sure you are using those events specifically to handle the lifecycle of elements.

PRO TIP: if you're using a list of objects make sure you bind the data by id, or some unique identifier, or the animations might behave unusually over time. Remember you are binding data to SVG you are not just wiping and redrawing a canvas!

d3.selectAll('circle').data([{id:1},{id:2}], function(d) { return d.id; });

Make note the optional second argument, that tells us how to bind the data! very important!

var svg = d3.select("svg");

//the data looks like this.
var data = [{
    id: 1,
    r: 3,
    x: 35,
    y: 30
}, {
    id: 2,
    r: 5,
    x: 30,
    y: 35
}];


//data generator makes the list above
function newList() {
    //just make a simple array full of the number 1
    var items = new Array(randoNum(1, 10)).fill(1)
    //make the pieces of data. ID is important!
    return items.map(function(val, i) {
      
        var r = randoNum(1, 16)
      
        return {
            id: i,
            r: r,
            x: randoNum(1, 200) + r,
            y: randoNum(1, 100) + r
        }
    });
}

//im just making rando numbers with this.
function randoNum(from, to) {
    return Math.floor(Math.random() * (to - from) + from);
}

function update(data) {
  
    //1. get circles (there are none in the first pass!)
    var circles = svg.selectAll('circle');
    
    //2. bind data
    var databoundCircles = circles.data(data, function(d) {
        return d.id;
    });

    //3. enter
    var enter = databoundCircles.enter()
      .append('circle')
      .attr('r', 0)

    //4. exit
    databoundCircles.exit()
      .transition()
      .attr('r', 0)
      .remove();

    //5. update
    //(everything after transition is tweened)
    databoundCircles
        .attr('fill', function(d, i){
          var h =  parseInt(i.toString(16));   
          return '#' + [h,h,h].join('');
        })

        .transition()
        .duration(1000)
        .attr('r', function(d, i) {
            return d.r * 4
        })
        .attr('cx', function(d, i) {
            return d.x * 2;
        })
        .attr('cy', function(d, i){
            return d.y * 2
        })
 ;
}

//first time I run, I use my example data above
update(data);

//now i update every few seconds
//watch how d3 'keeps track' of each circle
setInterval(function() {
    update(newList());
}, 2000);

<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="300">

</svg>

Is this a bad practice or am I doing it right?

Yes, it is a bad practice. In a normal circumstance I like to call it lazy coding: clearing the SVG (or whatever) and painting the dataviz again.

But, in your case, it's even worse: you will end up writing a huge amount of code (not exactly laziness, though), ignoring d3.transition(), which can easily do what you want. And that takes us to your second question:

Or, perhaps there is some other method I'm entirely unaware of, no?

Yes, as I just said, it's called transition(): https://github./d3/d3-transition

Then, at the end, you said:

Note: my animation might include 100-200 objects in view at a time.

First, modern browsers can handle that very well. Second, you still have to remove and repaint manually all that elements. If you benchmark the two approaches, maybe this is even worse.

Thus, just use d3.transition().

You can change the data (or the attributes) of the elements anytime you want, and "moving" (or transitioning) them to the new value calling a transition. For instance, to move this circle around, I don't have to remove it and painting it again:

var circle = d3.select("circle")
setInterval(() => {
    circle.transition()
        .duration(900)
        .attr("cx", Math.random() * 300)
        .attr("cy", Math.random() * 150)
        .ease(d3.easeElastic);
}, 1000)

<script src="https://d3js/d3.v4.min.js"></script>
<svg>
	<circle r="10" cx="100" cy="50" fill="teal"></circle>
</svg>