1
我不能讓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
任何幫助將不勝感激。
首先，在你的代碼中，我們沒有看到'
'和''所以你必須在一個非傳統的HTML結構，腳本，HTML標籤和CSS內嵌樣式。 JavaScript是否像這樣運行！？ – Meloman對不起。複製問題。在原始文件
和部分存在。 –因此，在您上次更新之後，我們會看到''
''。它需要進入。但不是那麼重要。 也許你需要一個document.ready函數來在執行腳本之前等待頁面加載。 哈耶夫你有什麼是從http：// localhost：8081/php/data1.php？ 我用你的代碼做了一個小提琴，但是如果我們沒有訪問你的json結果，就不能工作。 https://jsfiddle.net/veuaotjz/ – Meloman