Đặt biểu đồ hình tròn trên các nút đồ thị bố trí lực theo hướng D3

Tôi muốn đặt các biểu đồ hình tròn trên nút của một lực lượng D3 hướng đồ thị bố trí bằng cách sử dụng D3.js. Đây là một hình dung thông thường trong di truyền quần thể, xem ví dụ http://mathildasanthropologyblog.files.wordpress.com/2008/06/as3.jpg Đặt biểu đồ hình tròn trên các nút đồ thị bố trí lực theo hướng D3

enter image description here

Tôi đã bắt đầu với một âm mưu đồ thị rất cơ bản:

<!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>

Nhưng khi tôi cố gắng để thay thế các nút tròn với biểu đồ hình tròn, biểu đồ hình tròn tất cả kết thúc xếp chồng lên nhau ở góc của cốt truyện.

<!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>

Mọi hỗ trợ sẽ được đánh giá cao!

Nguồn

2013-02-10 Ryan

Vấn đề dường như là báo cáo kết quả cuối cùng trong callback lực-on-đánh dấu của bạn:

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

đường SVG không có như vậy x/y thuộc tính. Hãy thử dịch con đường thay vì:

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

Nguồn

2013-02-10 03:24:29

Xuất sắc. Cảm ơn bạn! – Ryan

Mã như trên không hoạt động, đoạn dưới đây hiển thị cả biểu đồ pie, ở vị trí bên phải, với các cạnh biểu đồ hình tròn màu sắc rõ ràng và với:

<!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>

Nguồn

2013-08-11 20:38:56

Đây là một jsfiddle: http://jsfiddle.net/9EF3G/ – Nate

Đặt biểu đồ hình tròn trên các nút đồ thị bố trí lực theo hướng D3

Trả lời

Các vấn đề liên quan