Javascript 带有d3.json（bardata.php）的空白网页，但可以使用d3.json（bardata.json）_Javascript_Php_Json_D3.js

Javascript 带有d3.json（bardata.php）的空白网页，但可以使用d3.json（bardata.json）

javascript php json d3.js

Javascript 带有d3.json（bardata.php）的空白网页，但可以使用d3.json（bardata.json）,javascript,php,json,d3.js,Javascript,Php,Json,D3.js,当使用d3.json（bardata.json）时，图表正在按其应有的方式创建，但是当使用d3.json（bardata.php）时，会出现一个空白网页（没有图表）-- json是bardata.php的echo的输出文件这是bardata.php文件 <?php $username = "root"; $password = "nk"; $host = "localhost"; $database="homedb"; $server = mysql_connect($host

当使用d3.json（bardata.json）时，图表正在按其应有的方式创建，但是当使用d3.json（bardata.php）时，会出现一个空白网页（没有图表）-- json是bardata.php的echo的输出文件

这是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($query);
}

echo json_encode($data);     

mysql_close($server);
?>

这是我的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>

我是d3.js的新手。谢谢。

在重新创建并测试设置后，它确实加载并创建了条形图，没有问题。我已经在Chrome、Firefox、Edge、Safari上进行了测试，它们都能正常工作。检查编码以确保它是UTF-8，以便json_encode提取数组。使用d3.js的本地副本进行测试。

能否先显示一个.json的示例，然后再显示一个.php json的示例？根据收到的错误，在将数组

$data

发送到json\u encode之前，它的格式似乎不正确。这个错误我已经犯过好几次了，结果就是这样。是的，两个文件中都有一个json示例。例如：

{“date”：{“value”：“1”，“date”：“2015-10-29”}

以及.php文件中的json是什么样子的？那么bardata.json输出是什么样子的？因为您包含的json进行验证。我使用：jsonlint.com来验证它。基本上，它看起来可以归结为第一个字符。如果你有一个嵌套的json，那么第一个字符应该是一个花括号

，但是如果json没有嵌套，那么它应该是一个方括号

。这位先生尽力帮助我！3个小时后（是的，3！！）关于持续聊天，当我向他表示感谢时，他只是说“很高兴能帮上忙”；感谢你，我的朋友！这是一个天真的想法，我双击了/var/www/html/index.html而不是，这就是浏览器没有阅读php文件的原因，现在解决了，再次感谢你的支持@Michael，这推动了我。

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

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