D3js Kuvvet Grafiklerindeki Düğümler Ekleme ve Kaldırma Grafiği

Question

Veritabanından json yüklüyorsunuz ve düzgün yüklenen bir json dosyası oluşturuyorum. Şimdi, Kuvvete Dayalı Bir Grafikte yanıt veren düğümleri yapmak için hangi adımları atacağımı bilmiyorum. Yeni düğümleri ve bağlantılarını kaldırmam gerekiyor.

force.nodes(json.nodes) 
    .links(json.links) 
    .start(); 

initNodes(json); 

Bunu daha dinamik hale getirebilir veya tüm görselleştirmeyi sıfırlamadan nasıl güncelleyebilirim?

Bu soruyu birkaç kez cevaplandırılmamış olarak görüyorum. Bu yüzden birisinin bir gönderi gönderebileceğini ve bir rehber verebileceğini umuyorum.

Answer 1

yeni noktalar ve burada ilişkiler eklemek için nasıl bir örnek görebilirsiniz: http://bl.ocks.org/2432083

düğümler ve ilişkiler kurtulmak biraz daha zordur, ancak burada süreç görebilirsiniz: http://bl.ocks.org/1095795

Answer 2

ekleme D3 kuvvet grafiğime giden düğümler/bağlantılar, ilk düğüm kümesini eklediğim yolu daha iyi anlayana kadar çok kafa karıştırıcıydı.

bir <g> varsayarsak size düğümler için kullanmak istediğiniz budur:

// Select the element where you'd like to create the force layout 
var el = d3.select("#svg"); 

// This should not select anything 
el.selectAll("g") 

// Because it's being compared to the data in force.nodes() 
    .data(force.nodes()) 

// Calling `.enter()` below returns the difference in nodes between 
// the current selection and force.nodes(). At this point, there are 
// no nodes in the selection, so `.enter()` should return 
// all of the nodes in force.nodes() 
    .enter() 

// Create the nodes 
    .append("g") 
    .attr("id", d.name) 
    .classed("manipulateYourNewNode", true); 

Şimdi

en grafiği başlatıldı kez düzenine bir düğüm katacak fonksiyonu yapalım!

newNodeData, yeni düğümünüzde kullanmak istediğiniz verileri içeren bir nesnedir. connectToMe, yeni düğümünüzü bağlamak istediğiniz düğümün benzersiz kimliğini içeren bir dizedir.

function createNode (newNodeData, connectToMe) { 
    force.nodes().push(newNodeData); 
    el.selectAll("g") 
     .data(force.nodes(), function(datum, index) { return index }) 

.data() isteğe bağlı ikinci bir değişken olarak işlev geri değerine göre bunları eşleştirerek, force.nodes() her bir düğüm için yeniden seçimi her bir düğüm için bir kez çalıştırılan ve. Hiçbir işlev sağlanmazsa, index'u (yukarıdaki gibi) döndüren bir geri dönüş işlevi başlatılır. Bununla birlikte, büyük olasılıkla, yeni seçiminizin indeksi (siparişin rastgele olduğuna inanıyorum) ile siparişin force.nodes() numaralı siparişi arasında bir anlaşmazlık olması muhtemeldir. Bunun yerine, büyük olasılıkla her bir düğüme özgü bir özelliği döndürme işlevine gereksinim duyarsınız.

Bu kez, .enter() yalnızca hiçbir anahtar .data() ikinci argüman tarafından bunun için bulunduğu için newData olarak eklemek için çalışıyoruz düğümü dönecektir.

 .enter() 
     .insert("g", "#svg") 
     .attr("id", d.name) 
     .classed("manipulatYourNewNode", true); 

    createLink(connectToMe, newNodeData.name); 

    force.start(); 
} 

createLink işlevi (aşağıda tanımlanmıştır), yeni düğümünüz ile tercih ettiğiniz düğüm arasında bir bağlantı oluşturur.

Ayrıca, the d3js API states that force.start() should be called after updating the layout.

Not: Öncelikle benim grafiğe düğümleri ve bağlantı eklemek için nasıl anlamaya çalışırken zaman zaman fonksiyonunun başında force.stop() çağrılması benim için büyük bir yardımcı oldu.

function createLink (from, to) { 
    var source = d3.select("g#" + from).datum(), 
     target = d3.select("g#" + to).datum(), 
     newLink = { 
      source: source, 
      target: target, 
      value: 1 
     }; 
    force.links().push(newLink); 

kod aşağıda olduğu varsayımlar altında çalışır:

d3.select("#links") 
    .selectAll("line") 
    .data(force.links()) 
    .enter() 
    .append("line"); 

:

1. #links içeren sarıcı unsurdur Kişisel bağlantılar <line> elemanlar olarak temsil edilir

2. bağlantı elemanları

tüm