d3.js PHP dosyasından JSON verilerini okuma

Question

Bir MySQL veritabanından verileri görüntülemek için basit bir d3.js çizgi grafiği kullanıyorum. Statik bir CSV'den veri çekerken iyi çalışıyordu, ancak şimdi veritabanına bağlamaya çalışıyorum, grafik doğru görüntülenmiyor.

JS komut dosyası:

// Set the dimensions of the canvas/graph 
var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
width = 600 - margin.left - margin.right, 
height = 270 - margin.top - margin.bottom; 

// Parse the date/time 
var parseDate = d3.time.format("%e-%b-%y %H:%M").parse; 

// 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"); 

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.date); }) 
.y(function(d) { return y(d.close); }); 

// Adds the svg canvas 
var svg = d3.select("#air_temp_chart") 
.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 + ")"); 

// Get the data 
d3.csv("php/air_temperature_data.php", function(error, data) { 
    data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     d.close = +d.close; 
    } 

    var tickValues = data.map(function(d) { return d.date; }); 

    xAxis 
    .tickValues(tickValues) 
    .tickFormat(d3.time.format('%H:%M')); 

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

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

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

    // Add the Y Axis 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

); 

}); 

PHP veri dosyası:?

$server = mysql_connect($host, $username, $password); 
$connection = mysql_select_db($database, $server); 

$myquery = "SELECT `date`, `close` FROM `readings_air_temperature`"; 
$query = mysql_query($myquery); 

if (! $query) { 
    echo mysql_error(); 
    die; 
} 

$data = array(); 

for ($x = 0; $x < mysql_num_rows($query); $x++) { 
    $data[] = mysql_fetch_assoc($query); 
} 

echo json_encode($data);  

mysql_close($server); 

>

PHP çıkışı (JSON):

[{"date":"1-May-12 06:00","close":"58.13"},{"date":"1-May-12 06:30","close":"53.98"},{"date":"1-May-12 06:30","close":"88.00"},{"date":"1-May-12 06:30","close":"101.29"}] 

veri dosyası gibi görünüyor iyi ama grafik herhangi bir dat yüklemiyor a. Bunun yerine, grafik herhangi bir etiket veya veri olmadan x ve y eksenini gösterir.

<svg height="270" width="600"><g transform="translate(50,30)"><path class="line"></path><g transform="translate(0,210)" class="x axis"><path d="M0,6V0H530V6" class="domain"></path></g><g class="y axis"><path d="M-6,0H0V210H-6" class="domain"></path></g></g></svg> 

birisi sorunun ne bana işaret edebilir:

Tarayıcımdaki Inspector'da SVG çıkış bakmak, bu ne alıyorum?

Answer 1

// Get the data 
d3.csv("php/air_temperature_data.php", function(error, data) { 
    data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     d.close = +d.close; 
    } 
    //... SHOULD BE IN HERE 
); 

// ALL THIS STUFF... 
var tickValues = data.map(function(d) { return d.date; }); 

xAxis 
.tickValues(tickValues) 
.tickFormat(d3.time.format('%H:%M')); 

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

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

Bu bir senkronizasyon sorunudur. data yalnızca d3.csv geri çağrımında (function(error,data) bit) eşzamansız olarak döndürülür. Program d3.csv'yi çağırır ve daha sonra veriler hemen kullanılabilir durumda gibi devam eder.

---

^^^ EDIT2 Kuralların eklenen yorumları görüntüle: Bu bir d3.csv çağrısı ve iade alma json olduğu gibi biz d3.json gerek!