exit().remove() doesn't remove node when it goes out of view

Question

I'm using d3js to move circular dots from right to left with respect to current time. I have a couple of issues: 1. .exit().remove() don't work. Node doesn't get removed once it goes out of the view. 2. Transition of circles are a bit jumpy

var circles = g.selectAll('path')
  circles.data(data)
    .enter()
    .append('path')
    .attr("d", symbol.type(d3.symbolCircle))
    .merge(circles)
    .attr("transform", (d) => "translate(" + x(d.x) + "," + y(d.y) + ")");   
  circles.exit().remove();

You can see my full code here: http://jsfiddle.net/hsdhott/3tdhuLgm/

Answer 1

Besides your enter-exit-update pattern not being correct (please check the snippet bellow), the big problem here is the data:

selection.exit() method won't magically select — normally for using remove() later — an element based on any arbitrary criterion, such as "getting out of the view" . It's based on the data only. And the problem is that your data never stops increasing:

if (count % 10 === 0) {
    var point = {
        x: globalX,
        y: ((Math.random() * 200 + 50) >> 0)
    };
    data.push(point);
}  

So, a very quick solution in this case is removing the data points based on your x domain:

data = data.filter(function(d) {
    return d.x > globalX - 10000;
});

This is just a suggestion, use the logic you want for removing the objects from the data array. However, regardless the logic you use, you have to remove them.

Regarding the jumpy transition, the problem is that you're using selection.transition and setInterval . That won't work, chose one of them.

Here is your updated code:

 var data = []; var width = 500; var height = 350; var globalX = new Date().getTime(); /* var globalX = 0; */ var duration = 250; var step = 10; var count = 0; var chart = d3.select('#chart') .attr('width', width + 50) .attr('height', height + 50); var x = d3.scaleTime() .domain([globalX, (globalX - 10000)]) .range([0, width]); var y = d3.scaleLinear() .domain([0, 300]) .range([300, 0]); // ----------------------------------- // Draw the axis var xAxis = d3.axisBottom() .scale(x) .ticks(10) .tickFormat(formatter); var axisX = chart.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0, 300)') .call(xAxis); // Append the holder for line chart and circles var g = chart.append('g'); function formatter(time) { if ((time.getSeconds() % 5) != 0) { return ""; } return d3.timeFormat('%H:%M:%S')(time); } function createData() { // Generate new data var point = { x: globalX, y: ((Math.random() * 200 + 50) >> 0) }; data.push(point); } function callInterval() { count++; if (count % 3 === 0) createData(); } // Main loop function tick() { // Generate new data if (count % 10 === 0) { var point = { x: globalX, y: ((Math.random() * 200 + 50) >> 0) }; data.push(point); } data = data.filter(function(d) { return dx > globalX - 10000; }); count++; globalX = new Date().getTime(); var timer = new Date().getTime(); var symbol = d3.symbol().size([100]), color = d3.schemeCategory10; var circles = g.selectAll('path') .data(data); circles = circles.enter() .append('path') .attr("d", symbol.type(d3.symbolCircle)) .merge(circles) .attr("transform", (d) => "translate(" + x(dx) + "," + y(dy) + ")"); circles.exit().remove(); // Shift the chart left x.domain([timer - 10000, timer]); axisX.call(xAxis); g.attr('transform', null) .attr('transform', 'translate(' + x(globalX - 10000) + ')'); // Remote old data (max 50 points) if (data.length && (data[data.length - 1].x < (globalX - 10000))) data.shift(); } tick(); setInterval(tick, 10); 

 .axis { font-family: sans-serif; font-size: 12px; } .line { fill: none; stroke: #f1c40f; stroke-width: 3px; } .circle { stroke: #e74c3c; stroke-width: 3px; fill: #FFF; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <svg id="chart"></svg>