La mayoría de las bibliotecas brindan una personalización limitada del gráfico de Sankey (como color de nodo, ancho, relleno).
Gráfico de Sankey predeterminado (d3):
Pero, ¿qué pasa si necesito cambiar la altura de los nodos y centrarlos verticalmente? ¿Como puedo hacer eso?
Mis requisitos:
¿Alguien puede ayudarme?
Sin mirar tu código, es un juego de adivinanzas. Entonces, supongo que has usado ejemplos de sankey D3.js en Internet que prácticamente comparten el mismo código. En algún momento podrías ver algo como esto:
var sankey = d3.sankey() .nodeWidth(12) .nodePadding(12) .size([width, height]);Por favor, intente jugar con nodeWidth (aumente el valor) para obtener lo que está buscando.
Un poco raro, pero puede anular las reglas de CSS para diseñar los elementos como desee.
Por ejemplo, si tengo un gráfico Sankey generado por d3 dentro de un div llamado "sankey", puedo agregar estas reglas CSS para cambiar los elementos rect a rojo y los elementos de ruta que forman los enlaces a azul.
A partir de algunas pruebas muy breves, los elementos rect parecen requerir el modificador CSS "! importante", de ahí que el comentario parezca un poco extraño:
#sankey > svg > g > g > g > rect { fill: red !important; } #sankey > svg > g > g > path { stroke: blue; stroke-opacity: 0.7; }Para agrandar los rectángulos, posiblemente podría configurar el color de su trazo para que sea el mismo que el relleno, y establecer el ancho del trazo en algo más grande, y luego jugar con el parámetro "nodePadding" en la API d3.
Adjunto una captura de pantalla de lo que tengo que trabajar jugando con estos: