Cấu hình cố định bố trí đồ thị tĩnh trong d3.js

Question

Tôi có một mã ví dụ làm việc (chỉ <script type="text/javascript"> phần) của một đồ thị tĩnh nhờ sủ dụng d3.js như sau:

 /* Create graph data */ 
     var nodes = []; 
     for (var i = 0; i < 13; i++) 
     { 
      var datum = { 
       "value": i 
      }; 
      nodes.push(datum); 
     } 

     var links = [{"source": 0, "target": 1}, 
        {"source": 1, "target": 2}, 
        {"source": 2, "target": 0}, 
        {"source": 1, "target": 3}, 
        {"source": 3, "target": 2}, 
        {"source": 3, "target": 4}, 
        {"source": 4, "target": 5}, 
        {"source": 5, "target": 6}, 
        {"source": 5, "target": 7}, 
        {"source": 6, "target": 7}, 
        {"source": 6, "target": 8}, 
        {"source": 7, "target": 8}, 
        {"source": 9, "target": 4}, 
        {"source": 9, "target": 11}, 
        {"source": 9, "target": 10}, 
        {"source": 10, "target": 11}, 
        {"source": 11, "target": 12}, 
        {"source": 12, "target": 10}]; 

     /* Create force graph */ 
     var w = 800; 
     var h = 500; 

     var size = nodes.length; 
     nodes.forEach(function(d, i) { d.x = d.y = w/size * i}); 

     var svg = d3.select("body").append("svg") 
        .attr("width", w) 
        .attr("weight", h); 

     var force = d3.layout.force() 
         .nodes(nodes) 
         .links(links) 
         .linkDistance(200) 
         .size([w, h]); 

     setTimeout(function() { 

      var n = 400 
      force.start(); 
      for (var i = n * n; i > 0; --i) force.tick(); 
      force.stop(); 

      svg.selectAll("line") 
       .data(links) 
       .enter().append("line") 
       .attr("class", "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; }); 

      svg.append("svg:g") 
       .selectAll("circle") 
       .data(nodes) 
       .enter().append("svg:circle") 
       .attr("class", "node") 
       .attr("cx", function(d) { return d.x; }) 
       .attr("cy", function(d) { return d.y; }) 
       .attr("r", 15); 

      svg.append("svg:g") 
       .selectAll("text") 
       .data(nodes) 
       .enter().append("svg:text") 
       .attr("class", "label") 
       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
       .attr("text-anchor", "middle") 
       .attr("y", ".3em") 
       .text(function(d) { return d.value; }); 

     }, 10); 

và nó tạo ra này khá scrambled bố trí:

trong khi đó là về mặt kỹ thuật đồ thị đúng, cách bố trí lý tưởng nên có một cái gì đó như thế này (bỏ qua các hình ảnh đồ họa khác nhau):

Lưu ý rằng bố cục phải được cố định để tải lại trang không thay đổi vị trí của mỗi nút; bố cục cũng phải tĩnh, trong đó không có hiệu ứng hoạt ảnh và các nút không thể kéo được. Cả hai yêu cầu đã đạt được trong kịch bản trên.

Vậy làm cách nào để tôi định cấu hình thêm tập lệnh d3 này để tạo bố cục được hiển thị trong hình ảnh thứ hai?

Answer 1

Trước tiên, tăng cường độ phí và giảm khoảng cách liên kết. Làm như vậy đặt trọng tâm lớn hơn vào cấu trúc toàn cầu thay vì kết nối cục bộ. Ngoài ra, nếu bạn tăng cường độ sạc đủ, điện tích đẩy sẽ đẩy ngay cả các nút được kết nối trực tiếp xa hơn, do đó làm tăng khoảng cách liên kết một cách hiệu quả đồng thời tạo ra cấu trúc tổng thể tốt hơn. (Nhược điểm của một lực lượng phụ trách mạnh là đồ thị khởi tạo là hỗn loạn hơn, nhưng điều này không phải là một vấn đề đối với bố trí tĩnh.)

Thứ hai, bạn có thể cần phải tăng số lần lặp hoặc thêm lực lượng tùy chỉnh để có kết quả tốt hơn. Các bố cục lực lượng thường hoạt động tốt trên các đồ thị tùy ý, nhưng không đảm bảo rằng chúng sẽ tạo ra kết quả tối ưu (hoặc thậm chí tốt). Đối với bất kỳ biểu đồ nào bạn có thể làm cho các giả định đơn giản (ví dụ: trees), có thể có thêm các lực hoặc ràng buộc mà bạn có thể áp dụng để khuyến khích mô phỏng hội tụ vào một giải pháp tốt hơn.