無法通過使用JSON

我試圖繪製簡單線圖上的y軸以及在「時間」值「IV」從MySQL讀取數據來呈現d3.js簡單圖x軸上。我從我的MySQL數據庫中讀取這些值。下面是我使用的PHP代碼：無法通過使用JSON

<?php 
    $username = "root"; 
    $password = "root"; 
    $host = "localhost"; 
    $database="db"; 

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

    $myquery = "SELECT data.IV, data.Time FROM data"; 
    $query = mysql_query($myquery); 

    if (! $myquery) { 
     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); 
?>

這裏是產生JSON：

[{"IV":"230.8","Time":"15:01:17+22\r"},{"IV":"233.7","Time":"15:06:57+22\r"},{"IV":"230.8","Time":"15:36:25+22\r"},{"IV":"234.5","Time":"15:40:38+22\r"},{"IV":"238.7","Time":"15:41:39+22\r"},{"IV":"238.7","Time":"15:41:50+22\r"},{"IV":"238.7","Time":"15:43:05+22\r"},{"IV":"230.8","Time":"15:01:17+22"},{"IV":"223.8","Time":"15:52:17+22"}]

所以我修改我在網上找到，試圖呈現數據的例子。然而，我得到的只是一個空白頁面。這裏是我的代碼有人可以告訴我，我做錯了什麼？我一直堅持這幾天。

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> /* set the CSS */ 

body { font: 12px Arial;} 

path { 
    stroke: steelblue; 
    stroke-width: 2; 
    fill: none; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: grey; 
    stroke-width: 1; 
    shape-rendering: crispEdges; 
} 

</style> 
<body> 

<!-- load the d3.js library --> 
<script type="text/javascript" src="d3/d3.v3.js"></script> 

<script> 

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

// 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.IV); }) 
    .y(function(d) { return y(d.Time); }); 

// Adds the svg canvas 
var svg = d3.select("body") 
    .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.json("gj.php", function(error, data) { 
    data.forEach(function(d) { 
     d.IV = +d.IV; 
       d.Time = +d.Time; 
    }); 

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

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

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

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

}); 

</script> 
</body>

這裏是我所看到的截圖： enter image description here

我懷疑問題是與+（數字）\ r在時間結束時存在。不過，我需要使用這種格式的數據。

來源

2013-08-16 Anon

您能否提供指向您在線教程的鏈接？ – iJade

我認爲你對時間格式是正確的。您可以通過在這裏包含一個類似於建議的小型forEach循環（http://www.d3noob.org/2012/12/getting-data.html）來標準化javascript/D3部分中的格式，並確保您具有時間格式在此處更正（http://www.d3noob.org/2012/12/formatting-date-time-on-d3js-graph.html）。相反，你可以在你從數據庫中選擇數據後在php中完成。無論哪種方式可能需要一些字符串格式， – d3noob

@iBlue我在這裏使用教程：https：//leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-using-php-to-extract- json-from-mysql（使用PHP從MySQL中提取json） – Anon

如果您在嘗試將時間強制爲數字後對數據數組執行console.log，則會看到每個對象上的Time屬性爲NaN，從而阻止它呈現。查看d3的時間格式化功能，將數字字符串解析爲實際的javascript日期對象，然後再轉換爲數字。

https://github.com/mbostock/d3/wiki/Time-Formatting

來源

2013-08-16 13:36:09 ne8il

謝謝@ ne8il，我會嘗試實現。 NaN格式是什麼意思？ – Anon

NaN代表不是數字。所以它不能正確識別變量的值（作爲一個時間單位），這正是上面評論中所推測的。 – d3noob

無法通過使用JSON

回答

相關問題