d3.jsがPHPファイルからJSONデータを読み取らない

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"}] 

データファイルがあると思われますうまくいっているが、グラフには何もロードされていないa。代わりに、グラフにはラベルやデータがない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を呼び出し、データがすぐに利用できるかのように続けます。それはd3.csvコールだとそれが返さなっJSONだとして、我々はd3.jsonが必要：私はあなたのコード^^^

---

EDIT2に追加されたコメントをご覧ください！