d3.js和mysql_javascript – 使用D3.js从MySQL数据库绘制条形图

我试图通过从我的数据库中取两列来绘制条形图,并使用

PHP中的json_encode将其转换为JSON(probc.php文件)

我在这里提到这个例子来构造一个条形图 – BAR CHART EXAMPLE

在这样做之后,我将属性字母和频率更改为我想要使用的列名称(f轴用于x轴,fpprob用于y轴),并且还将d3.tsv更改为d3.json并包含相关文件(probc) .PHP).但我在运行我的文件时没有得到任何结果.只是一个空白的香草页面.请帮忙！

这是代码

var margin = {top: 20,right: 20,bottom: 30,left: 40},width = 960 - margin.left - margin.right,height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()

.rangeRoundBands([0,width],.1);

var y = d3.scale.linear()

.range([height,0]);

var xAxis = d3.svg.axis()

.scale(x)

.orient("bottom");

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

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

x.domain(data.map(function(d) { return d.fphour; }));

y.domain([0,d3.max(data,function(d) { return d.fpprob; })]);

svg.append("g")

.attr("class","x axis")

.attr("transform","translate(0," + height + ")")

.call(xAxis);

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("Frequency");

svg.selectAll(".bar")

.data(data)

.enter().append("rect")

.attr("class","bar")

.attr("x",function(d) { return x(d.fphour); })

.attr("width",x.rangeBand())

.attr("y",function(d) { return y(d.fpprob); })

.attr("height",function(d) { return height - y(d.fpprob); });

});

function type(d) {

d.fpprob = +d.fpprob;

return d;

}