我使用MySQL和PHP作为后端。 有没有一个例子来说明d3.js与php和MySQL的使用。
答案 0 :(得分:4)
这是我绘制静态数据饼图的方法。您可以在.js文件中提取脚本并使用动态数据。
<html>
<head>
<title>
Pie chart
</title>
<script type="text/javascript" src='d3.v3.min.js' charset='utf-8' ></script>
</head>
<body>
<script type="text/javascript">
var metadata = {
'x' : 'name' ,
'y' : 'percent' };
var data = [
{label : 'name1', value : 25},
{label : 'name2', value : 20},
{label : 'name3', value : 40},
{label : 'name4', value : 15} ];
var width = 1100 , height = 650 , radius = 250 ,
color = ["#C5AAF5","#FB7374","#A3CBF1","#79BFA1","#F5A352","#94B3C8", "#F9D08B","#B2AC4E","#64BD4F","#C09372"];
var colorDescriptions = [];
var svgContainer = d3.select("body") // create svg container
.append("svg:svg")
.data([data])
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("transform", "translate(" + 300 + "," + 300 + ")") ;;
var arc = d3.svg.arc() // draw arc of given radius
.outerRadius(radius);
var pie = d3.layout.pie() // assign data for pie chart
.value(function(d) { return d.value; });
var arcs = svgContainer.selectAll("g.slice") // slice the circle
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice");
arcs.append("svg:path") // fill color in each slice
.attr("fill", function(d, i) {
var colorSelected = color[i];
colorDescriptions.push({"colorSelected": colorSelected, "label": data[i].label});
return colorSelected; } )
.attr("d", arc)
arcs.append("svg:text") // write slice information values
.attr("transform", function(d) {
d.innerRadius = 0;
d.outerRadius = radius;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d, i) { return data[i].value; })
.style("font-family","monospace")
.style("fill", "#3f3f3f")
.style("font-size", "20px");
descriptionText = "Pie Chart of " + metadata.x + " with " + metadata.y; // pie chart description
var description = svgContainer.append("g").attr("class", "description"); // pie chart description
var desc_label = description.append("text")
.attr("class", "description")
.attr("y", 300)
.attr("x", 000)
.text(descriptionText)
.style("font-weight", "bold")
.style("font-size", "20px")
.style("text-anchor", "middle");
var pieChartLabels = svgContainer.append("g").attr("id","pie-chart-labels"); //index for pie chart : name
pieChartLabels.selectAll("text").data(colorDescriptions).enter().append("svg:text")
.text(function(d) { return d.label; } ).attr("x",440)
.attr("y",function(d, i) { return 14 + i*30; })
.style("font-size", "20px");
var pieChartLabelsColors = svgContainer.append("g").attr("id","pie-chart-labels-colors");
pieChartLabelsColors.selectAll("rect").data(colorDescriptions).enter().append("rect")
.attr("x",400)
.attr("y",function(d, i) { return i*30; })
.attr("width", 25)
.attr("height", 15)
.style("fill" , function(d) { return d.colorSelected; }); //index for pie chart : color
</script>
</body>
</html>