D3JS Scatter plots inconsistent behavior

Question

This is somewhat a continuation to my original question which can be found in this page (and contains the full code)

Right now I’ve got a code that seems to be working fine in some scenarios but not in others. Let me explain…

Here is a snapshot of my database.

Dtg | Temperature

2016-04-03 10:28:07 26.4
2016-04-03 10:25:06 26.4
2016-04-03 10:22:05 26.4
2016-04-03 10:19:05 26.2
2016-04-03 10:16:04 26

If the next record would be something like

2016-04-03 18:00:00 25

Everything works well. The whole graph gets updated and the scatter plots moves along.

However, if the next records are

2016-04-03 10:37:11 26.4
2016-04-03 10:34:08 26.3
2016-04-03 10:31:07 26.4

Then the scatter plots remain at the same spot while the rest of the graph gets updated.

Any help would be much appreciated. thanks

the code:

// ** Update data section (Called from the onclick)
function updateData() {

// Get the data again
data = d3.json("2301data.php", function(error, data) {
data.forEach(function(d) {
    d.dtg = parseDate(d.dtg);
    d.temperature = +d.temperature;
   // d.hum = +d.hum; // Addon 9 part 3
});


// Scale the range of the data again 
 x.domain(d3.extent(data, function(d) { return d.dtg; }));
 y.domain([0, 60]); // Addon 9 part 4

 var svg = d3.select("#chart1")
 var circle = svg.selectAll("circle").data(data)

svg.select(".x.axis") // change the x axis
        .transition()
        .duration(750)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .transition()
        .duration(750)
        .call(yAxis);
    svg.select(".line")   // change the line
        .transition()
        .duration(750)
        .attr("d", valueline(data));

circle.transition()
        .duration(750)
        .attr("cx", function(d) { return x(d.dtg); })

    // enter new circles
    circle.enter()
        .append("circle")
        .filter(function(d) { return d.temperature > 30 })
        .style("fill", "red")   
        .attr("r", 3.5) 
        .attr("cx", function(d) { return x(d.dtg); })

    // remove old circles
    circle.exit().remove()


});
}