Kısıtlı d3.js Kuvvet göstergesi

Question

Güç düzenleri ile sıradan bir şey yapmak istiyorum (grafikleri görselleştirmek için). Takımyıldızları ve hepsine bakmak eğlencelidir, ancak zaman çizelgeleri verileri için bu yararlı değildir. Düzeni bir eksenle sınırlamak isterim, örneğin, düğümleri bir veri kümesinde göründükleri zamana göre yerleştirerek, görselleştirmenin "zıplamasını" koruyarak. Bu d3 kullanarak mümkün mü?

Answer 1

Benim yorumumu detaylandırmak için, evet, bu mükemmel bir şekilde mümkündür. Kuvvet düzeni aslında düğümlerin kendisini konumlandırmaz, sadece konumları hesaplar. tick olayının işleyicisinde, genellikle konumlandırmayı işleyen işlevi sağlarsınız. Orada, düğümlerin nasıl hareket edeceğini kısıtlayan keyfi kısıtlamalar ekleyebilirsiniz.

stock examples'dan birini kullanarak, x koordinatını sınırsız y ile hedeflenen konumun + -10'u içinde sınırlamak için aşağıdaki gibi şeyler yapabilirsiniz. İşte

force.on("tick", function() { 
    node.each(function(d) { 
    var intended = scale(d.value); 
    d.x = d.px = Math.min(intended + 10, Math.max(intended - 10, d.px)); 
    }); 
    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
}); 

pozisyon etiketlere kuvvet düzenini kullanan başka example olduğunu. Burada, x konumu göz ardı edilir (yani sabit) ve sadece y, düzenden etkilenir.

Answer 2

Webcola, D3.JS ile kısıtlamaya dayalı mizanpaj oluşturmak için harika bir araçtır.

https://github.com/tgdwyer/WebCola