与d3.json

我不能让PHP产生JSON数据我已经开发了PHP应用程序（data1.php），它产生从MySQL JSON输出：与d3.json

PHP

$username = "alitest"; 
$password = "aliden07"; 
$host = "localhost"; 
$database="ali_app"; 

$server = mysqli_connect($host, $username, $password); 
$connection = mysqli_select_db($server,$database); 

$myquery = "select Letter as '\"Letter\"', CAST(Freq as unsigned) as '\"Freq\"' from datajson"; 
$query = mysqli_query($server,$myquery); 

if (! $query) { 
    echo mysqli_error(); 
    die; 
} 

$data = array(); 

for ($x = 0; $x < mysqli_num_rows($query); $x++) { 
    $data[] = mysqli_fetch_assoc($query); 
} 

header('Content-type:application/json;charset=utf-8'); 
echo json_encode($data,JSON_NUMERIC_CHECK);  

mysqli_close($server);

在HTML文件我想用d3.json命令获取json数据。我将生成一个带有返回数据的条形图。

HTML用js和css

<!DOCTYPE html> 
<meta charset="utf-8"> 

<head> 
    <style> 
     .bar{ 
      fill: steelblue; 
     } 

     .bar:hover{ 
      fill: brown; 
     } 

     .axis { 
      font: 10px sans-serif; 
     } 

     .axis path, 
     .axis line { 
      fill: none; 
      stroke: #000; 
      shape-rendering: crispEdges; 
     } 
    </style> 
</head> 
<body> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script> 
     // set the dimensions of the canvas 
     var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
      width = 600 - margin.left - margin.right, 
      height = 300 - margin.top - margin.bottom; 


     // set the ranges 
     var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); 
     var y = d3.scale.linear().range([height, 0]); 

     // define the axis 
     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom") 


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

     // add the SVG element 
     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 + ")"); 

     // load the data 
     d3.json("http://localhost:8081/php/data1.php", function(error, data) { 

      data.forEach(function(d) { 
       d.Letter = d.Letter; 
       d.Freq = +d.Freq; 
      }); 

      // scale the range of the data 
      x.domain(data.map(function(d) { return d.Letter; })); 
      y.domain([0, d3.max(data, function(d) { return d.Freq; })]); 

      // add axis 
      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", 5) 
       .attr("dy", ".71em") 
       .style("text-anchor", "end") 
       .text("Frequency"); 

      // Add bar chart 
      svg.selectAll("bar") 
       .data(data) 
       .enter() 
       .append("rect") 
       .attr("class", "bar") 
       .attr("x", function(d) { 
        return x(d.Letter); 
       }) 
       .attr("width", x.rangeBand()) 
       .attr("y", function(d) { 
        return y(d.Freq); 
       }) 
       .attr("height", function(d) { 
        return height - y(d.Freq); 
       }); 
     }); 

    </script> 
</body>

我试图与两个HTTP服务器上运行的应用程序（servez和NPM安装HTTP服务器-g）。

对于服务的PHP我已经安装了wamp服务器。当我用本地文件更改d3.json命令的输入时，它可以工作，但是当我给出一个到php文件的链接时，我看不到图表。

// load the data 
d3.json("data1_db_out1.json", function(error, data) { 

    data.forEach(function(d) { 
     d.Letter = d.Letter; 
     d.Freq = +d.Freq; 
    });

我在我的桌面上试用它们。

HTTP的服务器：localhost：8080
WAMP：本地主机8081

任何帮助将不胜感激。

来源

2017-09-13 Ali Abbas Çiftçi

首先，在你的代码中，我们没有看到''和''所以你必须在一个非传统的HTML结构，脚本，HTML标签和CSS内嵌样式。 JavaScript是否像这样运行！？ – Meloman

对不起。复制问题。在原始文件和部分存在。 –

因此，在您上次更新之后，我们会看到''''。它需要进入。但不是那么重要。也许你需要一个document.ready函数来在执行脚本之前等待页面加载。哈耶夫你有什么是从http：// localhost：8081/php/data1.php？我用你的代码做了一个小提琴，但是如果我们没有访问你的json结果，就不能工作。 https://jsfiddle.net/veuaotjz/ – Meloman

这可能是交叉来源问题。尝试启用CORS在您的JSON响应：

header("Access-Control-Allow-Origin: *");

来源

2017-09-13 13:20:33

我会尽力回复你。 –

非常感谢。在我的json响应中启用CORS解决了我的问题。我现在可以看到图表。 –

@AliAbbasÇiftçi不客气！并且不要忘记将答案标记为已接受。 –

这是我所得到的，当我WAMP的服务器上运行http://localhost:8081/php/data1.php：

[ { 字母： “A”，频率：25 }， { 字母： “B”，频率：12 }，{ 信： “C”，频率：47 }，{ 信 “d”，频率：34 }， { 字母： “E”，频率：54 }， { 字母： “F”，频率：21 }， { 字母： “G”，频率：57 }， { 字母： “H”，频率：31 }， { 字母： “I”，频率：17 }， { 字母： “J”，频率：5 }， { 字母： “K”，频率：23 }， { 字母： “L”，频率：39 }， { 字母： “M”，频率：29 }， { 字母： “N”，频率：33 }， { 字母： “O”，频率：18 }， { 字母： “P”，频率：35 }， { 莱特R： “Q”，频率：11 }， { 字母： “R”，频率：45 }， { 字母： “S”，频率：43 }， { 字母： “T”，频率：28 }， { 字母： “U”，频率：26 }， { 字母： “V”，频率：30 }， { 字母：“X “，频率：5 }， { 字母： “Y”，频率：4 }， { 信： “Z”，频率：2 } ]

来源

2017-09-14 08:47:38

而且我已经改变了在Data1查询字符串。 PHP。当前运行的版本是：

所有的

<?php 
    $username = "alitest"; 
    $password = "aliden07"; 
    $host = "localhost"; 
    $database="ali_app"; 

    $server = mysqli_connect($host, $username, $password); 
    $connection = mysqli_select_db($server,$database); 

    //$myquery = "select Letter as '\"Letter\"', CAST(Freq as unsigned) as '\"Freq\"' from datajson"; 
    $myquery = "select Letter , CAST(Freq as unsigned) as Freq from datajson"; 
    $query = mysqli_query($server,$myquery); 

    if (! $query) { 
     echo mysqli_error(); 
     die; 
    } 

    $data = array(); 

    for ($x = 0; $x < mysqli_num_rows($query); $x++) { 
     $data[] = mysqli_fetch_assoc($query); 
    } 

    //header('Content-type:application/json;charset=utf-8'); 
    header("Access-Control-Allow-Origin: *"); 
    echo json_encode($data,JSON_NUMERIC_CHECK);  

    mysqli_close($server); 
?>

来源

2017-09-14 08:51:03

回答

相关问题