XML Javascript 绘制圆环图答案

【问题标题】：XML Javascript draw donut chartXML Javascript 绘制圆环图
【发布时间】：2016-11-02 23:23:33
【问题描述】：

我现在正在尝试使用 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 代码感到困惑。

感谢您给我一些建议。

【问题讨论】：

仅供参考：圆环图中没有“g”。所以你在问如何循环一个 XML 文档或者 XML 应该是什么？如何循环它取决于 XML 的外观。

标签： javascript html css xml

【解决方案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>

【讨论】：