XML JavaScript绘制网络图

问题描述：

我正在尝试使用XML和JavaScript创建圆环图。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>

我认为，存在的第一部分缺失的部分或概念的误解编码。任何人都请纠正我。

你应该一步一步来做 – Mahi

我一步一步做了......只是无法弄清楚什么是错误..我不知道哪个部分是错误的..在第1部分或data.xml中 – kenreal

如果你做了一步你可以看到哪一部分是错的。 – Mahi

答

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


}, 
}); 
});

这让我坚持几天。最后在这里发布我的答案。

XML JavaScript绘制网络图

相关推荐