XML JavaScript繪製網絡圖

Question

我正在嘗試使用XML和JavaScript創建圓環圖。

我試過用這個d3.v3.min.js庫。我試着用我的js編碼來檢查和循環XML中的數據並存儲在數組中。然後我試着運行編碼來繪製網絡圖。

$(document).ready(function(){ 

     $.ajax({ 
     type: "GET", 
     url: "data.xml", 
     dataType: "xml", 
     success: function(xml){ 

      var links = []; 
      $(xml).find('name').each(function(){ 
       var name = $(this); 
       var source = $name.attr("source"); 
       var target = $name.attr("target"); 

       links.push([source, target]); 

      }); 


       var nodes ={}; 
      // Compute the distinct nodes from the links. 
      links.forEach(function(link) { 
      link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 
      link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); 
        }); 

      visualizeIt(); 

     }, 

     error: function() { 
      alert("An error occurred while processing XML file.");  
     } 

    });   

}); 

對於繪製網絡圖的一部分，

function visualizeIt() { 



var width = 960, 
    height = 500; 

var force = d3.layout.force() 
    .nodes(d3.values(nodes)) 
    .links(links) 
    .size([width, height]) 
    .linkDistance(60) 
    .charge(-300) 
    .on("tick", tick) 
    .start(); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var link = svg.selectAll(".link") 
    .data(force.links()) 
    .enter().append("line") 
    .attr("class", "link"); 

var node = svg.selectAll(".node") 
    .data(force.nodes()) 
    .enter().append("g") 
    .attr("class", "node") 
    .on("mouseover", mouseover) 
    .on("mouseout", mouseout) 
    .call(force.drag); 

node.append("circle") 
    .attr("r", 8); 

node.append("text") 
    .attr("x", 12) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.name; }); 

function tick() { 
    link 
     .attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    node 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
} 
function mouseover() { 
    d3.select(this).select("circle").transition() 
     .duration(750) 
     .attr("r", 16); 
} 
function mouseout() { 
    d3.select(this).select("circle").transition() 
     .duration(750) 
     .attr("r", 8);} 

} 

這是我data.xml中

<?xml version="1.0" encoding="utf-8" ?> 
<note> 
<name source = "Math" target = "Science" /> 
<name source = "Bio" target = "Geo" /> 
<name source = "Science" target = "Astro" /> 
<name source = "Science" target = "Histo" /> 
</note> 

我認爲，存在的第一部分缺失的部分或概念的誤解編碼。任何人都請糾正我。

Answer 1

XML

<?xml version="1.0" encoding="utf-8" ?> 
<course> 
<source>Math</source> 
</course> 
<subcourse> 
<target>Science</target> 
</subcourse> 
</course> 

<course> 
<source>Bio</source> 
</course> 
<subcourse> 
<target>Geo</target> 
</subcourse> 
</course> 

JavaScript編碼

$(document).ready(function(){ 
$.ajax({ 
     type: "GET", 
     url: "data.xml", 
     dataType: "xml", 
     success: function(xml){ 
     var links = []; 
     var nodes = {}; 
     $(xml).find('course').each(function(){ 
       var getSource = $(this).find('source').text(); 

       $(this).find('target').each(function(){ 
        var getTarget = $(this).text(); 

        links.push({source:getSource, target:getTarget});     
       }); 
      }); 

// Compute the distinct nodes from the links. 
links.forEach(function(link) { 
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); 
}); 

var width = 960, 
    height = 500; 

var force = d3.layout.force() 
    .nodes(d3.values(nodes)) 
    .links(links) 
    .size([width, height]) 
    .linkDistance(60) 
    .charge(-300) 
    .on("tick", tick) 
    .start(); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var link = svg.selectAll(".link") 
    .data(force.links()) 
    .enter().append("line") 
    .attr("class", "link"); 

var node = svg.selectAll(".node") 
    .data(force.nodes()) 
    .enter().append("g") 
    .attr("class", "node") 
    .on("mouseover", mouseover) 
    .on("mouseout", mouseout) 
    .call(force.drag); 

node.append("circle") 
    .attr("r", 8); 

node.append("text") 
    .attr("x", 12) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.name; }); 

function tick() { 
    link 
     .attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    node 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
} 

function mouseover() { 
    d3.select(this).select("circle").transition() 
     .duration(750) 
     .attr("r", 16); 
} 

function mouseout() { 
    d3.select(this).select("circle").transition() 
     .duration(750) 
     .attr("r", 8); 
}; 


}, 
}); 
}); 

這讓我堅持幾天。最後在這裏發佈我的答案。