डी 3

में निर्देशित लेआउट ग्राफ़ के नोड्स पर प्ले पाई चार्ट रखें I D3.js. का उपयोग कर डी 3 बल निर्देशित लेआउट ग्राफ के नोड पर पाई चार्ट्स रखना चाहते हैं। यह जनसंख्या आनुवंशिकी में एक आम दृश्य है, उदाहरण के http://mathildasanthropologyblog.files.wordpress.com/2008/06/as3.jpg डी 3

enter image description here

मैं एक बहुत ही बुनियादी ग्राफ साजिश के साथ शुरू कर दिया है के लिए देख रहा है:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script type="text/javascript" src="d3/d3.v3.js"></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 

graph = { "nodes":[{"proportions": [{"group": 1, "value": 1}, 
            {"group": 2, "value": 2}, 
            {"group": 3, "value": 3}]}, 
        {"proportions": [{"group": 1, "value": 2}, 
            {"group": 2, "value": 2}, 
            {"group": 3, "value": 2}]}], 
      "links":[{"source": 0, "target": 1, "length": 500, "width": 1}] 
     } 

var width = 960, 
    height = 500, 
    radius = 10, 
    color = d3.scale.category20c(); 

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

var force = d3.layout.force() 
    .charge(-120) 
    .size([width, height]); 

force 
    .nodes(graph.nodes) 
    .links(graph.links) 
    .start(); 

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

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("circle") 
    .attr("class", "node") 
    .attr("r", radius) 
    .call(force.drag); 

force.on("tick", function() { 
    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("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
}); 
     </script> 
    </body> 
</html>

लेकिन जब मैं के साथ चक्र नोड्स को बदलने का प्रयास पाई चार्ट, पाई चार्ट सभी साजिश के कोने में खड़े हो जाते हैं।

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script type="text/javascript" src="d3/d3.v3.js"></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 

graph = { "nodes":[{"proportions": [{"group": 1, "value": 1}, 
            {"group": 2, "value": 2}, 
            {"group": 3, "value": 3}]}, 
        {"proportions": [{"group": 1, "value": 2}, 
            {"group": 2, "value": 2}, 
            {"group": 3, "value": 2}]}], 
      "links":[{"source": 0, "target": 1, "length": 500, "width": 1}] 
     } 

var width = 960, 
    height = 500, 
    radius = 10, 
    color = d3.scale.category20c(); 

var pie = d3.layout.pie() 
    .sort(null) 
    .value(function(d) { return d.value; }); 

var arc = d3.svg.arc() 
    .outerRadius(radius) 
    .innerRadius(0); 

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

var force = d3.layout.force() 
    .charge(-120) 
    .size([width, height]); 

force 
    .nodes(graph.nodes) 
    .links(graph.links) 
    .start(); 

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

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("g") 
    .attr("class", "node"); 

node.selectAll("path") 
    .data(function(d) {return pie(d.proportions); }) 
.enter().append("svg:path") 
    .attr("d", arc) 
    .style("fill", function(d) { return color(d.group); });; 

force.on("tick", function() { 
    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("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }); 
}); 
     </script> 
    </body> 
</html>

किसी भी सहायता की बहुत सराहना की जाएगी!

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

एसवीजी पथ ऐसी कोई x/y गुण:

स्रोत

2013-02-10 Ryan

समस्या अपने बल-ऑन-टिक कॉलबैक में पिछले बयान प्रतीत होता है। बजाय पथ के अनुवाद का प्रयास करें:

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

स्रोत

2013-02-10 03:24:29

अति उत्कृष्ट। धन्यवाद! – Ryan

किनारों दिखाई और साथ पाइ चार्ट रंग के साथ कोड के रूप में ऊपर काम कर रहा था, प्रदर्शित करता है दोनों पाई चार्ट नीचे टुकड़ा, सही स्थान में,:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 

    <style> 

     .node { 
      stroke: #fff; 
      stroke-width: 1.5px; 
     } 

     .link { 
      stroke: #808080; 
      stroke-opacity: .6; 
     } 

    </style> 
</head> 
<body> 

<script type="text/javascript"> 

    graph = { "nodes":[ 
        {"proportions": [{"group": 1, "value": 1}, 
            {"group": 2, "value": 2}, 
            {"group": 3, "value": 3}]}, 
        {"proportions": [{"group": 1, "value": 2}, 
            {"group": 2, "value": 2}, 
            {"group": 3, "value": 2}]}], 
       "links":[{"source": 0, "target": 1, "length": 500, "width": 1}] 
    } 

    var width = 960, 
    height = 500, 
    radius = 25, 
    color = d3.scale.category10(); 

    var pie = d3.layout.pie() 
     .sort(null) 
     .value(function(d) { return d.value; }); 

    var arc = d3.svg.arc() 
     .outerRadius(radius) 
     .innerRadius(0); 

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

    var force = d3.layout.force() 
     .charge(-120) 
     .linkDistance(4 * radius) 
     .size([width, height]); 

    force.nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

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

    var node = svg.selectAll(".node") 
     .data(graph.nodes) 
     .enter().append("g") 
     .attr("class", "node"); 

    node.selectAll("path") 
     .data(function(d, i) {return pie(d.proportions); }) 
     .enter() 
     .append("svg:path") 
     .attr("d", arc) 
     .attr("fill", function(d, i) { return color(d.data.group); });; 

    force.on("tick", function() { 
     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("x", function(d) { return d.x; }) 
      .attr("y", function(d) { return d.y; }) 
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"}); 
    }); 
</script> 
</body> 
</html>

स्रोत

2013-08-11 20:38:56

यहां एक jsfiddle है: http://jsfiddle.net/9EF3G/ – Nate

उत्तर

संबंधित मुद्दे