D3.js

Question

'daki düğümlerin başlangıç ​​konumlarını önceden hesaplayın ve ayarlayın. Igraph kullanarak kararlı kuvvet yönelimli grafiğin konumlarını önceden hesaplamaya çalışıyorum ve bunları d3.js grafiğime aktarıyorum. Bunun nedeni, kullanacağım veri kümesinin büyüklüğünden kaynaklanıyor, bu nedenle istemci tarafında tam güç hesaplaması yapılırsa, müşterinin donmaması için güvenemem. JSON formatındaki pozisyonlarım var ve d3.js.'de kullanışlı hale getirmek için lineer ölçekler kullandım.

var positions = 
{"positions": [{"x":"-68.824367374", "y": "-6.10824525755"}, 
{"x":"-80.8080803911", "y": "-3.38997541264"}, 
{"x":"6.75334817585", "y": "-49.6040729697"}, 
{"x":"14.6608797291", "y": "-81.8897019921"}, 
.... 
var force = d3.layout.force() 
       .charge(-100) 
       .linkDistance(3) 
       .size([width, height]) 
       .nodes(data.nodes) 
       .links(data.links) 
       .start(); 

var posX = d3.scale.linear() 
       .range([0,960]) 
       .domain([-125,120]); 

var posY = d3.scale.linear() 
       .range([0,500]) 
       .domain([-125,125]); 

Ve bunu yapmaya çalıştığım yol budur. Px ve py ile deney yaptım ama sonuçlar aynı. Bu kod asla kaçmamış gibi. Aşağıda görüldüğü gibi console.log atarsam, değer yazdırılmaz. Bu kodu koyduğum yerden, kuvvete başlamadan önce veya sonra olsun.

force.on("start", function() { 
        node 
        .data(positions.positions) 
        .attr("cx", function(d) { 
          console.log(posX(d.x)); 
          return posX(d.x); 
         }) 
         .attr("cy", function(d) { 
          return posY(d.y); 
         }) 
       }); 

Neden başlatma olayı düğümlerimin başlangıç ​​konumlarını ayarlamıyor? Rastgele hâlâ başlamış gibi görünüyorlar. Alternatif olarak, bir d3.js kuvvetinin yönlendirilmiş grafiğinin kararlı durumunu önceden hesaplamanın iyi bir yolu nedir? Bunu Phantomjs üzerinde yapmaya çalıştım ama pes ettim.

Soruyu okumak için zaman ayırdığınız için teşekkür ederiz!

DÜZENLEME İşte

bir dumbed örnektir: https://jsfiddle.net/xp0zgqes/ bunu birkaç kez tekrarlayın ve düğümlerin başlangıç ​​pozisyonlarına dikkat ederseniz onlar rastgele ilklendirildikten görebilirsiniz.

Answer 1

Gerçekten kendi sorumu yanıtlamayı sevmiyorum ama bence bu gerçekten faydalı olacaktır. Birincisi, (bu sadece benim durumumda olabilir) eğer ilk konum verileri düğüm/link verisinden farklı bir veri nesnesinden geliyorsa, onu birleştirirseniz iki veri kaynağına bağlamanızı sağlar (ya da benden daha zeki ol ve sadece x ve y pozisyonları ile orijinal json nesnesini yarat. Benim durumumda: JSON sihrine

for (var i = 0; i < data.nodes.length; i++){ 
        data.nodes[i].x = posX(positions.positions[i].x); 
        data.nodes[i].y = posY(positions.positions[i].y); 
        data.nodes[i].newAttribute = value; 
       } 

teşekkür kolay iyi örneğin bir verilerde yeni özellikler eklemek için olmasıdır Eğer düğümlerin sabitlenmesini istiyorsan.

Sorun, force.start() çağrısı ile görünüyor. şöyle kuvvet başlatılıyor çağrılan ise:

var force = d3.layout.force() 
       .charge(-100) 
       .linkDistance(3) 
       .size([width, height]) 
       .nodes(data.nodes) 
       .links(data.links) 
       .start(); 

düzeni rastgele varsayılan olarak düğümleri başlatır. Etrafında dolaşmanın bir yolu, bir kene olayını ekleyerek ve daha sonra gücü başlatacak.

var force = d3.layout.force() 
        .charge(-100) 
        .linkDistance(3) 
        .size([width, height]) 
        .nodes(data.nodes) 
        .links(data.links) 
        .on("tick", tick); 

        force.start(); //Note, not chained 


//Standard code that goes in the on.tick event 
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("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
} 

Ve Voilà! Şimdi, jsondan ayarlanan başlangıç ​​konumlarına sahip, tamamen işlevsel bir kuvvet yönlendirmeli grafiğe sahibiz.

Çalışma keman: https://jsfiddle.net/zbxbzmen/