空白网页与d3.json（bardata.php），但与d3.json（bardata.json） [英] blank web page with d3.json(bardata.php) but works with d3.json(bardata.json)

问题描述

图表是使用d3.json（bardata.json）时的应用程序，但使用d3.json（bardata.php）时获取空白网页（无图表） -
bardata.json是bardata.php回显中的输出文件

这是bardata.php文件

 <？php 
 $ username =root; 
 $ password =nk; 
 $ host =localhost; 
 $ database =homedb; 
 
 $ server = mysql_connect（$ host，$ username，$ password）; 
 $ connection = mysql_select_db（$ database，$ server）; 
 
 $ myquery =
 SELECT`date`，`value` FROM`bar_data`
; 
 $ 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 
} 
 
 echo json_encode（$ data）; 
 
 mysql_close（$ server）; 
？> 
  

这是bardata.json

  [{date：2013-01，value：53}，{date：2013-02，value：165}， date：2013-03，value：269}，{date：2013-04，value：344}，{date：2013-05 value：376}，{date：2013-06，value：410}，{date：2013-07，value：421}， date：2013-08，value：405}，{date：2013-09，value：376}，{date：2013-10 value：359}，{date：2013-11，value：392}，{date：2013-12，value：433}，{ date：2014-01，value：455}，{date：2014-02，value：478}] 
  
 
 
 
这是我的index.html 
  ;！DOCTYPE html> 
< meta charset =utf-8> 
 
< style> / * set the CSS * / 
 
 body {font：12px Arial;} 
 
路径{
 stroke：steelblue; 
 stroke-width：2; 
 fill：none; 
} 
 
 .axis路径，
 .axis行{
 fill：none; 
 stroke：gray; 
 stroke-width：1; 
 shape-rendering：crispEdges; 
} 
 
< / style> 
 
< body> 
 
< script src =http://d3js.org/d3.v3.js>< / script> 
 
< script> 
 
 var margin = {top：20，right：20，bottom：70，left：40}，
 width = 600  -  margin.left  -  margin.right，
 height = 300  -  margin.top  -  margin.bottom; 
 
 //解析日期/时间
 var parseDate = d3.time.format（％Y-％m）。 
 
 var x = d3.scale.ordinal（）。rangeRoundBands（[0，width]，.05）; 
 
 var y = d3.scale.linear（）。range（[height，0]）; 
 
 var xAxis = d3.svg.axis（）
 .scale（x）
 .orient（bottom）
 .tickFormat（d3.time.format （％Y-％m））; 
 
 var yAxis = d3.svg.axis（）
 .scale（y）
 .orient（left）
 .ticks 
 
 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 .left +，+ margin.top +））; 
 
 //传递.php输出时获取空白的web浏览器
 
 d3.json（bardata.php，function（error，data）{
 
 if（error）return console.warn（error）; 
 console.log（data）; 
 data.forEach（function（d）{
 d.date = parseDate（d。日期）; 
 d.value = + d.value; 
}）; 
 
 //如果我使用.json比它的工作，同样的.json我得到回显bardata.php输出
 
 /*d3.json(\"bardata.json，function（error，data）{
 
 if（error）return console.warn错误）; 
 console.log（data）; 
 data.forEach（function（d）{
 d.date = parseDate（d.date）; 
 d.value = + d.value; 
}）; * / 
 
 x.domain（data.map（function（d）{return d.date;}））; 
 y。 domain（[0，d3.max（data，function（d）{return d.value;}）]）; 
 
 svg.append（g）
 .attr class，x axis）
 .attr（transform，translate（0，+ height +））
 .call（xAxis）
 .selectAll ）
 .style（text-anchor，end）
 .attr（dx，-.8em）
 .attr（dy， - 。 55em）
 .attr（transform，rotate（-90））; 
 
 svg.append（g）
 .attr（class，y axis）
 .call（yAxis）
 .append ）
 .attr（transform，rotate（-90））
 .attr（y，6）
 .attr（dy，.71em） 
 .style（text-anchor，end）
 .text（Value（$））; 
 
 svg.selectAll（bar）
 .data（data）
 .enter（）。append（rect）
 .style ，steelblue）
 .attr（x，function（d）{return x（d.date）;}）
 .attr（width，x.rangeBand（））
 .attr（y，function（d）{return y（d.value）;}）
 .attr（height，function（d）{return height  -  y（d.value）; }）; 
 
}）; 
 
< / script> 
 
< / body> 
  
这个库我使用是对的吗？或我做错了什么？ ;所有文件bardata.json，bardata.php，index.html在同一目录中。
 
 
 
当调试firefox浏览器时，此行出现此错误，
if （error）return console.warn（error）;
  SyntaxError：JSON.parse： JSON数据
栈跟踪：
 d3_json @ http：//d3js.org/d3.v3.js：9488：12 
 respond @ http：//d3js.org/d3.v3 .js：1939：20 
  
我是d3.js.谢谢。
解决方案
重新创建设置并测试后，它会加载并创建条形图。我已经测试了它在Chrome，Firefox，Edge，Safari和他们都工作。检查编码，以确保它是UTF-8，所以json_encode确实拾起数组。用d3.js的本地副本测试。
 
Chart is creating as it should when using d3.json(bardata.json) but the getting blank web page (no chart) when using d3.json(bardata.php)--
bardata.json is the output file from the echo of bardata.php

this is bardata.php file
<?php
$username = "root"; 
$password = "nk";   
$host = "localhost";
$database="homedb";

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

$myquery = "
SELECT  `date`, `value` FROM  `bar_data`
";
$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);
?>
This is bardata.json
[{"date":"2013-01","value":"53"},{"date":"2013-02","value":"165"},{"date":"2013-03","value":"269"},{"date":"2013-04","value":"344"},{"date":"2013-05","value":"376"},{"date":"2013-06","value":"410"},{"date":"2013-07","value":"421"},{"date":"2013-08","value":"405"},{"date":"2013-09","value":"376"},{"date":"2013-10","value":"359"},{"date":"2013-11","value":"392"},{"date":"2013-12","value":"433"},{"date":"2014-01","value":"455"},{"date":"2014-02","value":"478"}]
And this is my index.html
<!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>

<script src="http://d3js.org/d3.v3.js"></script>

<script>

var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%Y-%m").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y-%m"));

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);

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

//getting blank web browser when passing .php output

d3.json("bardata.php", function(error, data) {

    if (error) return console.warn(error);
    console.log(data);
    data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.value = +d.value;
});

//if I use .json than its working, the same .json which i get by echoing the bardata.php output

/*d3.json("bardata.json", function(error, data) {

    if (error) return console.warn(error);
    console.log(data);
    data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.value = +d.value;
});*/    

x.domain(data.map(function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-.8em")
  .attr("dy", "-.55em")
  .attr("transform", "rotate(-90)" );

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Value ($)");

svg.selectAll("bar")
  .data(data)
  .enter().append("rect")
  .style("fill", "steelblue")
  .attr("x", function(d) { return x(d.date); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); });

});

</script>

</body>
 this library i am using is right? or what am i doing wrong? ; all files bardata.json, bardata.php, index.html are in same directory.

When debugging firefox browser getting this error at this line,
    "if (error) return console.warn(error);"
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Stack trace:
d3_json@http://d3js.org/d3.v3.js:9488:12
respond@http://d3js.org/d3.v3.js:1939:20
I am new to d3.js. Thank you.
解决方案
After recreating your setup and testing it, it does load and create the bar chart without issue. I've tested it on Chrome, Firefox, Edge, Safari and they all work. Checked the encoding to make sure it is UTF-8, so that json_encode does pick up the array. Testing with a local copy of d3.js.

                        
这篇关于空白网页与d3.json（bardata.php），但与d3.json（bardata.json）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！