sunburst - círculo d3.js embalaje a lo largo de una línea
d3.js tutorial (2)
Oooh, este era un rompecabezas ...
Si observa el código del gráfico NYTimes, utiliza coordenadas precalculadas en el archivo de datos, por lo que no es de mucha utilidad.
Sin embargo, hay una declaración de variable no utilizada en la parte superior del script que sugiere que la versión original usó d3.geom.quadtree para diseñar los círculos. El quadtree no es realmente un método de diseño; se usa para crear un árbol de búsqueda de nodos adyacentes, de modo que cuando necesite encontrar un nodo en un área determinada no tenga que buscar en todo el conjunto. Ejemplo aquí .
Por lo tanto, el quadtree se puede utilizar para identificar cuáles de sus puntos de datos se pueden superponer entre sí en el eje x. Luego debe calcular cuánto necesita compensar para evitar esa superposición. Los radios variables complican ambas funciones ...
Tengo un caso de prueba implementado aquí: http://fiddle.jshell.net/6cW9u/5/
El algoritmo de empaquetado no es perfecto: siempre agrego nuevos círculos al exterior de los círculos existentes, sin probar si podrían acercarse más, de modo que a veces obtienes un espacio en blanco adicional significativo cuando los bordes lejanos de los círculos chocan entre sí. . (Ejecútelo unas cuantas veces para tener una idea de las posibilidades; tenga en cuenta que tengo las variables x distribuidas como aleatorio normal y las variables r distribuidas como uniformes aleatorios.) También obtuve un desbordamiento de pila en los métodos recursivos durante una iteración con N = 100 - la distribución aleatoria claramente no se distribuyó lo suficientemente bien para la optimización de quadtree.
Pero tiene la funcionalidad básica. Deja un comentario aquí si no puedes seguir la lógica de los comentarios de mi código.
- ABR
Actualizar
Nuevo violín aquí: http://fiddle.jshell.net/6cW9u/8/
Después de mucha reorganización, obtuve el algoritmo de empaquetado para buscar huecos entre las burbujas existentes. He cambiado el orden de clasificación (para que los círculos más grandes se agreguen primero) para mostrar cómo se pueden agregar pequeños círculos en los espacios vacíos, aunque como menciono en los comentarios del código, esto reduce la eficiencia de la búsqueda de quadtree.
También se agregaron varias decoraciones y transiciones para que pueda ver claramente cómo se están posicionando los círculos, y establecer la escala r como raíz cuadrada, por lo que el área (no el radio) es proporcional al valor en los datos (que es más realista, y lo que el OP solicitó).
Obtuve un conjunto de datos donde cada muestra tiene un tamaño (0-1000) y un valor (grados 1-5). Quiero visualizar los datos con círculos de diferentes tamaños a lo largo de una línea (eje del dominio), muy parecido a:
http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=1&
(tenga en cuenta que los círculos, incluso con la misma tasa de impuestos efectiva no se superponen)
Ejemplo de datos:
- muestra 1: tamaño 300 valor 3.2
- muestra 2: tamaño 45 valor 3.8
- muestra 3: tamaño 4400 valor 4.0
- muestra 5: tamaño 233 valor 0.2
- muestra 6: tamaño 4000 valor 4.2
¿Cómo se pueden visualizar los datos anteriores usando círculos en una línea (el tamaño decide el diámetro, el valor decide la posición aproximada en la línea) para que los círculos no se superpongan?
He estado mirando el diseño de empaque de D3, pero por lo que puedo decir, no es compatible con esto de fábrica. ¿Alguien tiene alguna idea sobre cómo abordar esto?
El diseño de empaque de D3 no es la respuesta aquí. Coloca círculos en espiral alrededor del grupo existente. Aquí está yo la ingeniería inversa del algoritmo detrás del diseño de empaque:
Sugeriría un enfoque basado en el diseño de la fuerza . De esa forma, puedes dar fuerza a tus nodos hacia un centro gravitatorio, y luego dejar que la gravedad haga su trabajo.
Los diseños de fuerza (por ejemplo, Clustered Force Layout I ) suelen ser animaciones, por lo que querrás aplicar un diseño de fuerza estática .
He completado este enfoque en un bloque de ejemplo , que se ve así:
