我正在尝试使用D3.js绘制实时数据。对于我遵循的条形图this link description here。这是我想要的真实情节，但不是通过“fakeData.json”文件，但为此，我想从mysql中检索动态数据。为此，我跟着using-d3-with-a-mysql-database。现在，解决我的问题：它适用于此
d3.json("data.json", function (err, data){....
但当我用
替换 data.json时d3.json("index.php", function (err, data){....
我在输出中没有任何内容。我的问题看起来类似to this problem，但无法找到所需的结果。我的PHP代码（ index.php ）看起来像这样 `
//fetch table rows from mysql db
$sql = "select * from tbl1";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
//create an array
$emparray = array();
while($row =mysqli_fetch_assoc($result))
{
$emparray[] = $row;
}
echo json_encode($emparray);
//close the db connection
mysqli_close($connection);
并且，当复制并粘贴到 data.json 文件中时，它的输出正常。我的data.json文件看起来
[
{"name":"John", "value":21088},
{"name":"Kathford", "value":297},
{"name":"King", "value":2095},
{"name":"Tylor", "value":64},
{"name":"Edward", "value":35},
{"name":"Saddey", "value":23},
{"name":"Sandy", "value":29},
{"name":" Rita ", "value":28},
{"name":"Stanley", "value":25},
{"name":"Hiung", "value":21},
{"name":"Chang", "value":19},
{"name":"Bokki", "value":30},
{"name":"Amzod", "value":15},
{"name":"Allure", "value":2000},
{"name":"Jim", "value":4011}
]
最后，情节的整个代码是
final.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div id="everything">
<h1>Real time plot</h1>
<h2>Top Rating Standing</h2>
<div id="chart"></div>
<h2>Data from<a href="#"> International Journal</a></h2>
</div>
<script>
//updatingBarChart.js
var setup = function(targetID){
//Set size of svg element and chart
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom,
categoryIndent = 4*15 + 5,
defaultBarWidth = 2000;
//Set up scales
var x = d3.scale.linear()
.domain([0,defaultBarWidth])
.range([0,width]);
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], 0.1, 0);
//Create SVG element
d3.select(targetID).selectAll("svg").remove()
var svg = d3.select(targetID).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 + ")");
//Package and export settings
var settings = {
margin:margin, width:width, height:height, categoryIndent:categoryIndent,
svg:svg, x:x, y:y
}
return settings;
}
var redrawChart = function(targetID, newdata) {
//Import settings
var margin=settings.margin, width=settings.width, height=settings.height, categoryIndent=settings.categoryIndent,
svg=settings.svg, x=settings.x, y=settings.y;
//Reset domains
y.domain(newdata.sort(function(a,b){
return b.value - a.value;
})
.map(function(d) { return d.Name; }));
var barmax = d3.max(newdata, function(e) {
return e.value;
});
x.domain([0,barmax]);
/////////
//ENTER//
/////////
//Bind new data to chart rows
//Create chart row and move to below the bottom of the chart
var chartRow = svg.selectAll("g.chartRow")
.data(newdata, function(d){ return d.Name});
var newRow = chartRow
.enter()
.append("g")
.attr("class", "chartRow")
.attr("transform", "translate(0," + height + margin.top + margin.bottom + ")");
//Add rectangles
newRow.insert("rect")
.attr("class","bar")
.attr("x", 0)
.attr("opacity",0)
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.value);})
//Add value labels
newRow.append("text")
.attr("class","label")
.attr("y", y.rangeBand()/2)
.attr("x",0)
.attr("opacity",0)
.attr("dy",".35em")
.attr("dx","0.5em")
.text(function(d){return d.value;});
//Add Headlines
newRow.append("text")
.attr("class","category")
.attr("text-overflow","ellipsis")
.attr("y", y.rangeBand()/2)
.attr("x",categoryIndent)
.attr("opacity",0)
.attr("dy",".35em")
.attr("dx","0.5em")
.text(function(d){return d.Name});
//////////
//UPDATE//
//////////
//Update bar widths
chartRow.select(".bar").transition()
.duration(300)
.attr("width", function(d) { return x(d.value);})
.attr("opacity",1);
//Update data labels
chartRow.select(".label").transition()
.duration(300)
.attr("opacity",1)
.tween("text", function(d) {
var i = d3.interpolate(+this.textContent.replace(/\,/g,''), +d.value);
return function(t) {
this.textContent = Math.round(i(t));
};
});
//Fade in categories
chartRow.select(".category").transition()
.duration(300)
.attr("opacity",1);
////////
//EXIT//
////////
//Fade out and remove exit elements
chartRow.exit().transition()
.style("opacity","0")
.attr("transform", "translate(0," + (height + margin.top + margin.bottom) + ")")
.remove();
////////////////
//REORDER ROWS//
////////////////
var delay = function(d, i) { return 200 + i * 30; };
chartRow.transition()
.delay(delay)
.duration(900)
.attr("transform", function(d){ return "translate(0," + y(d.Name) + ")"; });
};
//Pulls data
//Since our data is fake, adds some random changes to simulate a data stream.
//Uses a callback because d3.json loading is asynchronous
var pullData = function(settings,callback){
d3.json("index.php", function (err, data){
if (err) return console.warn(err);
var newData = data;
data.forEach(function(d,i){
var newValue = d.value
newData[i].value = newValue <= 0 ? 10 : newValue
})
newData = formatData(newData);
callback(settings,newData);
})
}
//Sort data in descending order and take the top 10 values
var formatData = function(data){
return data.sort(function (a, b) {
return b.value - a.value;
})
.slice(0, 5);
}
//I like to call it what it does
var redraw = function(settings){
pullData(settings,redrawChart)
}
//setup (includes first draw)
var settings = setup('#chart');
redraw(settings)
//Repeat every 3 seconds
setInterval(function(){
redraw(settings)
}, 3000);
</script>
</body>
有几天我陷入了困境。我将非常感谢您的建议。