0
我正在尝试使用XML和JavaScript创建甜甜圈图表。XML Javascript绘制甜甜圈图表
我试着用这个JS编码。但是我不能制作可以与JS一起运行的XML。
var SCIENCE = 0;
var ART = 0;
var MATH = 0;
$(document).ready(function() {
$.ajax({
type: "GET",
url: "abc.xml",
dataType: "xml",
success: function(xml) {
var prog = $(this).text();
$(xml).find('course').each(function() {
var prog = $(this).text();
if (prog == "SCIENCE") {
SCIENCE++;
} else if (prog == "ART") {
ART++;
} else if (prog == "MATH") {
MATH++;
}
});
visualizeIt();
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
function visualizeIt() {
var total = SCIENCE + ART + MATH;
var pSCIENCE = (SCIENCE/total) * 100;
var pART = (ART/total) * 100;
var pMATH = (MATH/total) * 100;
var width = 960,
height = 500,
radius = Math.min(width, height)/2;
var vis = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI])
data = [
[0, pSCIENCE, "#3399FF", "SCIENCE"],
[pSCIENCE, pSCIENCE + pART, "#FF9966", "ART"],
[pSCIENCE + pART, 100, "#FF99FF", "MATH"]
]
var arc = d3.svg.arc()
.innerRadius(150)
.outerRadius(220)
.startAngle(function(d) {
return cScale(d[0]);
})
.endAngle(function(d) {
return cScale(d[1]);
});
var g = vis.selectAll(".arc")
.data(data)
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return d[2];
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ") ";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) {
return d[3];
});
}
我还是新的XML。我很困惑如何创建可以调用JS的XML代码。
谢谢你给我一些建议。
FYI:没有 “G” 在圆环图。所以你在问如何遍历一个XML文档或XML应该是什么?如何遍历它是基于XML的外观。 – epascarello