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