d3.js没有从PHP文件中读取我的JSON数据
d3.js not reading my JSON data from PHP file
我使用一个简单的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轴,没有任何标签或数据。
当我在浏览器的Inspector中查看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>
有人能告诉我出了什么问题吗?
// 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,然后继续,就好像数据立即可用一样。查看我添加到您的代码^^^的评论
第2版:这是一个d3.csv调用,我们需要d3.json,因为它是json!
相关文章:
- 我该如何解决这个问题?“未捕获的类型错误:无法读取 null 的属性'appendChild'”
- d3.js没有从PHP文件中读取我的JSON数据
- 我如何用jquery读取简单的json结果,以及如何发布新的结果
- 我希望joint.js库读取我的JSON并将其显示为一个单元格:rect和circle
- 如何在Struts1中映射和读取我的动态表单条目
- 我的变量保存在 URL/位置中,如何从另一个页面读取它
- 我无法在 JavaScript 中获取要打印到文本区域的属性值,我收到一个错误:未捕获的类型错误:无法读取 null 的
- 我一直收到未捕获的引用错误:未定义下拉菜单和未捕获的类型错误:无法读取 null 的属性“样式”
- 使用Pagedown,我得到“未捕获的类型错误:无法读取null的属性'attachEvent'”
- 我得到以下JS代码:无法读取null的属性“客户端宽度”
- 是什么导致了我的“未捕获的类型错误:无法读取未定义的属性'到小写'”错误
- 我可以从网站上读取“真实”的移动GPS坐标吗?
- 为什么我的jQuery代码无法读取撇号
- 如何调整这个javascript文件以在localhost上读取我的数据.解析RDF任务
- Rails Jquery js.erb没有读取我的实例变量来进行比较
- 如何防止responsed.js读取我的retina显示媒体查询
- 怎么能我的html不读取我的js
- 不能使用angular HTTP服务读取我的json文件
- HTML5像素处理问题;画布不能读取我的图像(不能在线)
- Javascript可以't读取我的json数组