d3js散布図自動更新doesnt work

Question

3djs散布図の自動更新方法を理解するための助けが必要です。ただし、更新コード が実行されているときにグラフは更新されますが、散布図はそのまま残ります。古いものを削除するためにsvg.selectAll（ "。dot"）。remove（）を使用していますが、それらを追加する方法を見つけることができません。私はいくつかのソリューションをオンラインで見つけましたが、どれも自分のコードのために働いていませんでした。

ご協力いただければ幸いです。ありがとう

DB構造：

dtg |温度

2016年3月2日午前9時14分00秒23

2016年3月2日午前9時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> 

Answer 1

私が間違っていた最初の事次の行には、以下のか、他svg.selectAllはないだろうと

<script src="http://d3js.org/d3.v3.min.js"></script> 

を交換する必要があります。..間違っd3jsを使用していました作業。

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

ここまでは、散布図更新が行われる限りです。私は今いくつかのデータベースでうまく動作する以下のコードを使用しています。私の場合、それはまだうまく動作しないと私はstakoverflow義務づける方針のrequstsとしてsepearte質問として、それを掲載する予定だ。..

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


}); 
}