D3.js - Kuvvet-yönlendirmeli grafik ile düğüm bağlantı ağacı arasında animasyon yapılabilir mi?

Question

Ben D3.js kitaplığı kullanarak ve zorla yönettiği grafik demo bakıyorum: Ben de düğüm-link ağacının bakıyorum

http://mbostock.github.com/d3/ex/force.html

:

http://mbostock.github.com/d3/ex/tree.html

Ben yapmak istiyorum ne

geçerli:

- zorla yönettiği grafik ile başlayın ve bir düğüm tıkladığında, varsa o merkezde seçilen düğüm ile bir ağaca sorunsuz animasyonlu. - Daha sonra, kullanıcı tuvaldeki herhangi bir boş alana tıkladığında, , kuvvetle yönlendirilen grafiğe geri animasyon uygulamalıdır.

Daha önce böyle bir şey yapan veya almak için en iyi yaklaşım hakkında herhangi bir tavsiyede bulunan var mı? D3.js’de yeniyim ve bunun çerçeve tarafından desteklenip desteklenmediği konusunda hiçbir fikrim yok.

Answer 1

Yapmanız gereken şey, gücü durdurmak ve varolan düğümlerin diğer düzenden türetilen x-y değerine dönüşümünü uygulamaktır. Yani fonksiyonu şu şekilde görünecektir:

force.stop(); 
d3.selectAll("g.nodes").transtion().duration(500) 
    .attr("translate","transform("+newLayoutX+","+newLayoutY+")" 

Sonra düğümleri dizi yineleme ve yeni X ve Y yansıtmak için x, y, px, py değerlerini ayarlayın. Bu değil

https://gist.github.com/emeeks/4588962

: Bu force.start()

çalıştırdığınızda bu örnekte plotLayout() fonksiyonuna bir göz alabilir kuvvet düzeni için geçerli x ve y pozisyonunu bilmek için düğümleri ayarlayacaktır Yine de, ikinci bir d3.layout güveniyor. Karşılaştığınız problem, hiyerarşik düzenlerde beklendiği gibi düğümlerinizi ve kenarlarınızdaki verileri bir dizi node.children'e dönüştürmenizi gerektiren ağaç düzeni için bir hiyerarşik veri kümesine ihtiyaç duymanızdır. Bunu yapmamın yolu veri kümesini çoğaltmak ve manuel olarak düzleştirmek, ancak farkında olmadığım daha zarif bir çözüm olabilir.