XML Javascript draw draw donut chart

Теперь я пытаюсь использовать XML и JavaScript для создания диаграммы пончиков.XML Javascript draw draw donut chart

Я пробовал с этим кодированием JS. Но я не могу сделать XML, который может работать с JS.

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. Я смущен тем, как создать XML-код, который может звонить с помощью JS.

Благодарим за предоставленный мне совет.

источник

2016-11-02 kenreal

FYI: нет "г" в кольцевой диаграммы. Итак, вы спрашиваете, как перебирать XML-документ или что должен быть XML? Как перебирать его, он основан на том, как выглядит XML. – epascarello

Основной 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>

источник

2016-11-02 12:53:09 TaoR

XML Javascript draw draw donut chart

ответ

Смежные вопросы