Bir d3 Kuvvet Düzeni'nde var olan düğümleri güncelleştirme

Question

d3 kullanarak bir güç düzeni oluşturdum ve iyi çalışıyor. Benim ilk veri bir json dosyasından yüklenir ve grafik this d3.js example benzer tekniklerle çizilir: Artık grafik I düğümleri, güncelleme eklemek ve kaldırmak için gereken ekranda olduğunu

bir web soketi üzerinden aldığım verilerden uçmak. Çalışan yöntemleri ekleyip kaldırdım ancak mevcut bir düğümün özelliklerini güncellemenin doğru yolunu bulamıyorum.

Yaptığım okumadan doğru tekniği topladığımda veri kaynağını değiştirmek, ardından enter() yöntemini kullanarak grafiği güncelleştirmek.

yapıyorum bir düğümü güncellemek için aşağıdakileri yapın:

function updateNode(id, word, size, trend, parent_id){  
    var updateNode = nodes.filter(function(d, i) { return d.id == id ? this : null; }); 
    if(updateNode[0]){ 
    updateNode.size = Number(size); 
    updateNode.trend = trend; 
    nodes[updateNode.index] = updateNode;  
    update(); 
    } 
} 

güncelleme fonksiyonu daha sonra düğümlerin günceller:

function update(){ 
    node = vis.selectAll('.node') 
    .data(nodes, function(d) { 
    return d.id; 
    }) 

    createNewNodes(node.enter()); 
    node.exit().remove(); 
    force.start(); 
} 

function createNewNodes(selection){  
    var slct = selection.append('g') 
    .attr('class', 'node') 
    .call(force.drag); 

    slct.append('circle') 
    .transition() 
    .duration(500) 
    .attr('r', function(d) { 
     if(d.size){ 
     return Math.sqrt(sizeScale(d.size)*40); 
     } 
    }) 
} 

Bunun için doğru bir yaklaşım alıyor muyum? Bu kodu denediğimde, daire üzerinde yarıçap özniteliğini ayarlamaya çalışırken veri noktası olarak aldığım düğüm, düğüm dizisindeki son düğümdür. Yani Tek bir düğüm nesnesi yerine hiyerarşik düğüm verilerini içeren.

Herhangi işaretçiler büyük ölçüde bu :) çok fazla zaman harcadım, mutluluk duyacağız

ihtiyacınız birden noktaları vardır

Answer 1

. Ne sorularınıza aldığım geçerli:

Bu sorunun basit cevabı 'ı yeniden modeli kullanan nasıl' Mike Bostock bu mükemmel öğretici okumak söylemek olacaktır: İsterseniz towards reusable charts

daha fazla bilgi için, belgelerin bu seçim ilginç olabilir:

• selections documentation
• how selections work
• A bar chart, part 2: Muhtemelen m güncellemelerin nasıl çalıştığını anlamak için ilgi çekici.

  function ForceGraph(selector,data) { 
      // This is the class that will create a graph 
  
      var _data = data 
      // Local variable representing the forceGraph data 
  
      svg = d3.select(selector) 
       .append('svg') 
      // Create the initial svg element and the utilities you will need. 
      // These are the actions that won't be necessary on update. 
      // For example creating the axis objects, your variables, or the svg container 
  
      this.data = function(value) { 
       if(!arguments.length) { 
       // accessor 
       return _data; 
       } 
       _data = value; 
       return this; 
       // setter, returns the forceGraph object 
      } 
  
      this.draw = function() { 
       // draw the force graph using data 
  
       // the method here is to use selections in order to do: 
       // selection.enter().attr(...) // insert new data 
       // selection.exit().attr(...) // remove data that is not used anymore 
       // selection.attr(...) // 
  
      } 
  } 
  
  var selector = "#graphId"; 
  var data = {nodes: [...],links: [...]}; 
  myGraph = new ForceGraph(selector,data); 
  // Create the graph object 
  // Having myGraph in the global scope makes it easier to call it from a json function or anywhere in the code (even other js files). 
  myGraph.draw(); 
  // Draw the graph for the first time 
  
  // wait for something or for x seconds 
  
  var newData = {nodes: [...],links: [...]}; 
  // Get a new data object via json, user input or whatever 
  myGraph.data(newData); 
  // Set the graph data to be `newData` 
  myGraph.draw(); 
  // redraw the graph with `newData` 
  

  muhtemelen görebileceğiniz gibi, amaç yeni bir düğüm eklemek için bir işleve sahip değildir:

Şimdi, işte ben senin özel bir sorun nedeniyle yapacağını uygulamalarının bir taslağıdır. Amaç, tüm yönelimli grafikleri yalnızca mevcut düğümleri güncelleyerek veya kaldırarak ve yeni düğümleri ekleyerek yeniden çizmektir. Bu şekilde çizim kodu sadece bir kez yazılır, daha sonra sadece veri değişir. Her ne kadar çok daha basit bir bağlamda, Updating links on a force directed graph from dynamic json data