Carga basada en el tamaño - diseño de fuerza d3

Question

Estoy tratando de hacer un gráfico de fuerza usando d3.layout.force, y necesito que el contenedor se pueda redimensionar, es decir, me gustaría poder calcular los valores apropiados de carga y de distancia de enlace en función de el tamaño, o d3 hazlo por mí de alguna manera mágica.

He intentado (enlace: http://jsfiddle.net/VHdUe/6/) que solo usa nodos. Estoy configurando la carga a un valor que se basa en la cantidad de nodos que cabrían en el radio del círculo en el que tiende a tener forma.

La solución funciona para algunos contenedores de tamaño medio, pero si hace clic en cambiar el tamaño de un par de veces, se puede ver que en realidad no funciona para todos los tamaños ...

La única salida que veo es usando una transformación de escala svg, lo que arruinará el tamaño de mis elementos desfavorable. ¿Alguna otra opción?

PD: He visto http://mbostock.github.com/d3/talk/20110921/bounding.html (la respuesta a D3 force directed layout with bounding box), pero prefiero tener una solución basada en la gravedad que una caja de caja.

Answer 1

Además de charge y linkDistance, también tiene gravity. Si desea que el gráfico mantenga la misma densidad relativa al tamaño del diseño, querrá escalar tanto la carga como la gravedad. Estas son las dos principales fuerzas de cálculo que determinan el tamaño total del blob. Ver my force layout talk para más detalles.

probé unos versiones diferentes, y éste parecía funcionar bastante bien:

var k = Math.sqrt(nodes.length/(width * height)); 

layout 
    .charge(-10/k) 
    .gravity(100 * k) 

Aquí nodes.length/(width * height) es linealmente proporcional a la densidad gráfica: la zona de los nodos dividida por el área del diseño. La fuerza de carga sigue al inverse-square law, por lo que podría explicar por qué la raíz cuadrada funciona bien. La "gravedad" de D3 es un resorte virtual que se escala linealmente con la distancia desde el centro de disposición, por lo que también aumenta la gravedad a medida que el gráfico se vuelve más denso y desalienta a los nodos a escapar del cuadro delimitador.