XML Javascript绘制圆环图

Question

我现在正在尝试使用XML和JavaScript来创建圆环图。

我试过这个JS编码。但我不能制作可以用JS运行的XML。

＆＃13;

＆＃13;

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];
    });
}

＆＃13;

＆＃13;

＆＃13;     

我还是XML新手。我对如何创建可以使用JS调用的XML代码感到困惑。

感谢您给我一些建议。

Answer 1

基本XML应如下所示：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<tag>
    <course>SCIENCE</course>
    <course>SCIENCE</course>
    <course>ART</course>
    <course>MATH</course>
    <course>SCIENCE</course>
    <course>ART</course>
    <course>SCIENCE</course>
    <course>ART</course>
    <course>MATH</course>
    <course>MATH</course>
</tag>