D3の強制的なレイアウトグラフのノードに円グラフを配置する

D3.jsを使用して、D3強制描画レイアウトのノードに円グラフを配置したいとします。これは、集団遺伝学における一般的な視覚化したものです、私は非常に基本的なグラフのプロットを開始しました例えばhttp://mathildasanthropologyblog.files.wordpress.com/2008/06/as3.jpg D3の強制的なレイアウトグラフのノードに円グラフを配置する

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>

ご協力いただければ幸いです。

出典

2013-02-10 Ryan

問題は、あなたの力・オン・ダニのコールバックの最後の文のように見える：

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

SVGパスには、このようなX/Yの属性を持っていません。代わりのパスを変換してみてください：

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

D3の強制的なレイアウトグラフのノードに円グラフを配置する

答えて

関連する問題