Javascript d3js散点图自动更新不起作用

需要了解如何自动更新3djs散点图的帮助。但是，当更新时，代码看起来很好 函数正在运行，图形已更新，但散点图仍保持不变。我正在使用svg.selectAll（“.dot”）.remove（）删除过时的内容，但无法找到方法将其重新添加。我在网上找到了一些解决方案，但没有一个适合我的代码

任何帮助都将不胜感激。谢谢

数据库结构：

dtg |温度

2016-03-02 09:14:00 23

2016-03-02 09:10:00 22

代码：

<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 40},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
var formatTime = d3.time.format("%e %B %X");

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.dtg); })
    .y(function(d) { return y(d.temperature); });

var div = d3.select("#chart1").append("div")    
    .attr("class", "tooltip")               
    .style("opacity", 0);

// Adds the svg canvas
var svg = d3.select("#chart1")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

function make_x_axis() {        
    return d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(10)
}

function make_y_axis() {        
    return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10)
}
// Get the data
d3.json("2301data.php", function(error, data) {
    data.forEach(function(d) {
        d.dtg = parseDate(d.dtg);
        d.temperature = +d.temperature;
   });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.dtg; }));
     y.domain([0, 60]); // 
 //   y.domain([0, d3.max(data, function(d) { return d.temperature; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

    // draw the scatterplot
    svg.selectAll(".dot")   
        .data(data)                                         
        .enter().append("circle")   
        .attr("class", "dot")
        .filter(function(d) { return d.temperature > 30 })
        .style("fill", "red")   
        .attr("r", 3.5) 
        .attr("cx", function(d) { return x(d.dtg); })        
        .attr("cy", function(d) { return y(d.temperature); })

    // Tooltip stuff after this
        .on("mouseover", function(d) {      
            div.transition()
                .duration(500)  
                .style("opacity", 0);
            div.transition()
                .duration(200)  
                .style("opacity", .9);  
            div .html(
                d.temperature + "C" + "<br>" +
                formatTime(d.dtg)) 
                .style("left", (d3.event.pageX + 8) + "px")          
                .style("top", (d3.event.pageY - 18) + "px");})
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
    .style("font-size", "14px") 
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
    .style("font-size", "14px") 
        .call(yAxis);

// Draw the grid 1
    svg.append("g")         
        .attr("class", "grid")
        .attr("transform", "translate(0," + height + ")")
        .call(make_x_axis()
            .tickSize(-height, 0, 0)
            .tickFormat("")
        )
// Draw the grid 2
    svg.append("g")         
        .attr("class", "grid")
        .call(make_y_axis()
            .tickSize(-width, 0, 0)
            .tickFormat("")
        )   
// Addon 3               // text label for the graph
    svg.append("text")
        .attr("x", (width / 2))             
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "14px") 
        .style("text-decoration", "underline") 
        .style('fill', 'white')
    //.attr("class", "shadow") // using text css         
        .text("2301 Temperature read in the past 24h\n");


});

var inter = setInterval(function() {
                updateData();
        }, 5000); 

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

    // Get the data again
    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]); 

    var svg = d3.select("#chart1").transition(); 

    // Make the changes
        svg.selectAll(".dot").remove(); //remove old dots 
        svg.select(".line").duration(750).attr("d", valueline(data));
    svg.select("x.axis").duration(750).call(xAxis);
    svg.select("y.axis").duration(750).call(yAxis);

    //update the scatterplot
    svg.selectAll(".dotUpdate")
    .data(data)
        .attr("class", "dotUpdate")
    .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); })        
        .attr("cy", function(d) { return y(d.temperature); });



    });
}


</script>

//设置画布/图形的尺寸
var margin={顶部：30，右侧：20，底部：30，左侧：40}，
宽度=400-margin.left-margin.right，
高度=200-margin.top-margin.bottom；
//解析日期/时间
var parseDate=d3.time.format（“%Y-%m-%d%H:%m:%S”）.parse；
var formatTime=d3.time.format（“%e%B%X”）；
//设定范围
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）.scale（x）
.方向（“底部”）。刻度（5）；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
//界定界线
var valueline=d3.svg.line（）
.x（函数（d）{返回x（d.dtg）；}）
.y（函数（d）{返回y（d.温度）；}）；
var div=d3。选择（“图表1”）。追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
//添加svg画布
var svg=d3。选择（“图表1”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
函数make_x_axis（）{
返回d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（10）
}
函数make_y_axis（）{
返回d3.svg.axis（）
.比例（y）
.东方（“左”）
.滴答声（10）
}
//获取数据
json（“2301data.php”，函数（错误，数据）{
data.forEach（函数（d）{
d、 dtg=解析日期（d.dtg）；
d、 温度=+d.温度；
});
//缩放数据的范围
x、 域（d3.extent（数据，函数（d）{返回d.dtg；}））；
y、 域（[0，60]）；//
//域（[0，d3.max（数据，函数（d）{返回d.temperature；}）]；
//添加valueline路径。
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，valueline（数据））；
//画散点图
svg.selectAll（“.dot”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“类”、“点”）
.filter（函数（d）{返回d.temperature>30}）
.样式（“填充”、“红色”）
.attr（“r”，3.5）
.attr（“cx”，函数（d）{返回x（d.dtg）；}）
.attr（“cy”，函数（d）{返回y（d.temperature）；}）
//这之后的工具提示
.on（“鼠标悬停”，函数（d）{
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
过渡部（）
.持续时间（200）
.样式（“不透明度”，.9）；
html(
d、 温度+“C”+“
”+
格式化时间（d.dtg））
.style（“左”（d3.event.pageX+8）+“px”）
.style（“top”，（d3.event.pageY-18）+“px”）；}）
.on（“mouseout”），函数（d）{
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
});
//添加X轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.style（“字体大小”、“14px”）
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.style（“字体大小”、“14px”）
.呼叫（yAxis）；
//绘制网格1
svg.append（“g”）
.attr（“类”、“网格”）
.attr（“变换”、“平移（0）”、“高度+”）
.调用（生成x轴（）
.tickSize（-height，0，0）
.tick格式（“”）
)
//绘制网格2
svg.append（“g”）
.attr（“类”、“网格”）
.调用（生成y轴（）
.tickSize（-width，0，0）
.tick格式（“”）
)   
//插件3//图形的文本标签
svg.append（“文本”）
.attr（“x”，（宽度/2））
.attr（“y”，0-（margin.top/2））
.attr（“文本锚定”、“中间”）
.style（“字体大小”、“14px”）
.style（“文本装饰”、“下划线”）
.style（'填充'，'白色'）
//.attr（“类”、“阴影”）//使用文本css
.text（“过去24小时读取的2301温度\n”）；
});
var inter=setInterval（函数（）{
更新数据（）；
}, 5000); 
//**更新数据部分（从onclick调用）
函数updateData（）{
//再次获取数据
json（“2301data.php”，函数（错误，数据）{
data.forEach（函数（d）{
d、 dtg=解析日期（d.dtg）；
d、 温度=+d.温度；
//d、 hum=+d.hum；//附加9第3部分
});
//再次缩放数据的范围
x、 域（d3.extent（数据，函数（d）{返回d.dtg；}））；
y、 域（[0,60]）；
var svg=d3.select（“#chart1”）.transition（）；
//做出改变
svg.selectAll（“.dot”）.remove（）；//删除旧点
svg.select（“.line”）.duration（750）.attr（“d”，valueline（数据））；
svg.select（“x.axis”）.duration（750）.call（xAxis）；
svg.select（“y.axis”）.duration（750）.call（yAxis）；
//更新散点图
svg.selectAll（“.dotUpdate”）
.数据（数据）
.attr（“类”、“点更新”）
.enter（）.append（“圆”）
.filter（函数（d）{返回d.temperature>30}）
.样式（“填充”、“红色”）
.attr（“r”，3.5）
.attr（“cx”，函数（d）{返回x（d.dtg）；}）
.attr（“cy”，函数（d）{返回y（d.tempera
<script src="http://d3js.org/d3.v3.min.js"></script>

<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>

// ** 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()


});
}