Neden force.on'a ihtiyacımız var d3

Question

Ben d3'ü temelden kuvvete yönlendirilmiş bir grafiği kodlayarak öğreniyorum.Modum aşağıda. Anlamadığım şey force.on'un amacıdır. ('tick' ...

Düzeni için yerleşik bir sınıf kullanıyorsanız, d3.layout.force() öğelerinizi düğümlerinize ve bağlantılarınıza vermeniz yeterli olacağını düşünmüştüm. Grafiği dengeli bir düzlemde çizebilme

force.on ('tick' bölümü ...) 'i açıklarsam tüm dairelerim ve çizgilerim sol üst köşede olur. ne olduğu arasındaki fark içten içe ve svg kapsayıcıda neler oluyor bu nedenle force.on'a ('tick'), her seferinde geçerli dahili değerler kümesine uydurmak için düzeni yeniden çizelim.

var nodes = [ 
     {}, 
     {}, 
     {} 
]; 

var links = [ 
     {'source': 0, 'target': 1} 
]; 

// append svg element to container 
var mychart = d3.select('#chart') 
     .append('svg') 
     .attr('width', w) 
     .attr('height', h); 

// create force layout in memory 
var force = d3.layout.force() 
     .nodes(nodes) 
     .links(links) 
     .size([w, h]); 

// append a group for each data element 
var node = mychart.selectAll('circle') 
     .data(nodes).enter() 
     .append('g') 
     .call(force.drag); 

// append circle onto each 'g' node 
node.append('circle') 
     .attr('fill', palette.green) 
     .attr('r', circleWidth); 


/*force.on('tick', function(e) { 
     node.attr('transform', function(d, i) { 
      return 'translate('+ d.x +', '+ d.y +')'; 
     }) 

     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 }) 
});*/ 


var link = mychart.selectAll('line') 
     .data(links).enter() 
     .append('line') 
     .attr('stroke', palette.gray) 

force.start(); 

Answer 1

Kuvvet düzeni, eşzamansız olarak çalışır. Yani, force.start()'u aradığınızda, düğümlerin arka planda paralel olarak konumunu belirleyen hesaplamaları yapmaya başlar. Bu hesaplamalar tek bir adım değil, uzun bir süre boyunca (birkaç saniye) çalışan bir simülasyon.

tick işleyicisi, mizanpajın durumunu değiştirdiğinde (benzetim bir kene tarafından ilerlemiş halde) durumunuzu almanızı sağlayan bir işlevdir ve özellikle üzerinde çalıştıkları düğümleri ve bağlantıları yeniden örneklendirir. simülasyondalar.

Sen sadece adımların belirli sayıda düzeni çalıştırmak ve sonra this example olduğu gibi hiç tick olay işleme olmadan çizebilirsiniz olsa tick olayı işlemek gerekmiyor. tick işleyici işlevinde dinamik olarak yapmak, düzenin nasıl ilerlediğini görebilmeniz avantajına sahiptir. Ancak, sadece sonuçla ilgileniyorsanız teknik olarak gerekli değildir.