d3.js не читает данные JSON из файла PHP

Question

Я использую простой граф d3.js для отображения данных из базы данных MySQL. Он отлично работал, когда я извлекал данные из статического CSV, но теперь, когда я пытаюсь подключить его к базе данных, график отображается неправильно.

JS скрипт:

// 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 файл данных:

$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 выход (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"}] 

Файл данных, как представляется, отлично, но график не загружает какие-либо данные а. Вместо этого график просто показывает оси x и y без каких-либо меток или данных.

Когда я смотрю на выходе SVG в инспекторе в моем браузере, это то, что я получаю:

<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> 

Может кто-то момент мне, что не так?

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

Это проблема с синхронизацией. data будет возвращаться асинхронно только в обратном вызове d3.csv (бит function(error,data)). Однако программа вызывает d3.csv, а затем продолжает работу, как если бы данные были доступны немедленно. Смотрите комментарии я добавил в код ^^^

---

edit2: Это d3.csv вызов, и мы должны d3.json, как это получение JSON возвращается!