D3.js Quick Start Guide

Avoiding redrawing the entire screen during rendering

At the moment, every time we call render(), we wipe all <circle> elements from <svg>. This is inefficient. Let's just remove the ones we don't want

At the top of the render() function, assign d3.select('#points').selectAll('circle').data(runs) to a variable, so we can use it later. This helps preserve how DOM elements are assigned to data elements in the next sections. Find this at the top of the render() function declaration:

d3.select('#points').html('');d3.select('#points').selectAll('circle') .data(runs) .enter() .append('circle');

Change it to this:

d3.select('#points').html('');var circles = d3.select('#points') .selectAll('circle') .data(runs);circles.enter().append('circle');