Cómo crear un diagrama dirigido por fuerza usando D3
D3 es una poderosa biblioteca de visualización de datos que se puede utilizar para crear una variedad de gráficos, incluidos gráficos dirigidos por fuerza. Los diagramas dirigidos por la fuerza se pueden utilizar para representar relaciones entre cualquier cosa conectada, como redes sociales, análisis de marketing, etc. En este artículo, cubriremos cómo crear gráficos dirigidos por fuerza usando D3.
Paso 1: Instalar D3
Primero, debe visitar el sitio web oficial de D3 (https://d3js.org/) para descargar la última versión de D3. Una vez que se complete la descarga, descomprímala en el directorio de su proyecto.
Paso 2: preparar los datos
Un diagrama dirigido por la fuerza necesita un conjunto de datos que le indique qué relaciones mostrar. El conjunto de datos debe ser un archivo de datos con formato JSON. Normalmente, el conjunto de datos de un gráfico dirigido por fuerza consta de dos partes: nodos y conexiones. Los nodos contienen información sobre cada elemento que se mostrará, mientras que las conexiones contienen información sobre las relaciones entre estos elementos. 1},
{fuente: 1, destino: 2},
{fuente: 2, destino: 0}
]
}
Este archivo de datos contiene tres nodos y tres enlaces, cada nodo apunta a una relación entre dos nodos.
Paso 3: Crear un contenedor SVG
SVG (Scalable Vector Graphics) es un lenguaje estándar para crear gráficos vectoriales. Los gráficos orientados a la fuerza requieren un contenedor SVG para contener los elementos gráficos. Aquí hay un ejemplo de código HTML simple que crea un contenedor SVG:
Este fragmento de código creará un contenedor SVG de 500*500 en la página para contener elementos gráficos orientados a la fuerza.
Paso 4: Crear un gráfico dirigido por fuerza
Con D3, podemos crear un gráfico dirigido por fuerza usando el siguiente código:
varsvg=d3. seleccionar(svg),
ancho= svg.attr(ancho),
alto= svg.attr(alto
varsimulación=d3.forceSimulation(); )
.force(enlace, d3.forceLink().id(función(d){returnd.id;}))
.force(carga, d3.forceManyBody() )
.force(center, d3.forceCenter(ancho/2, alto/2));
varlink=svg.append(g)
. attr(clase, enlaces)
.selectAll(line)
.data(links)
.enter().append(line)
.attr (ancho de trazo, función(d){returnMath.sqrt(d.value);});
varnode=svg.append(g)
. attr(clase, nodos)
.selectAll(círculo)
.data(nodos)
.enter().append(círculo)
.attr (r, 5)
.call(d3.drag()
.on(inicio, arrastrar iniciado)
.on(arrastrar , arrastrado)
p>.on(end, arrastrado));
node.append(title)
.text(function(d){returnd .id;});
simulación
.nodes(nodos)
.on(tick, ticked);
simulación. fuerza(enlace)
.links(enlaces);
funciónticked(){
enlace
.attr(x1, función( d){returnd.source.x; })
.attr(y1, función(d){returnd.source.y;})
.attr(x2, función( d){returnd.target. x; })
.attr(y2, function(d){returnd.target.y;});
nodo
.attr(cx, function(d){returnd.x;})
.attr(cy, function(d){returnd.y;});
}
functiondragstarted(d){
if(!d3.event.active)simulación.alphaTarget(0.3).restart();
d.fx= d.x;
d.fy=d.y;<
/p>
}
función arrastrada(d){
d.fx=d3.event.x;
d.fy=d3.event .y;
}
funcióndragended(d){
if(!active)simulación.alphaTarget(0);
d .fx=null;
d.fy=null;
}
En este fragmento de código, utilizamos la plantilla base para gráficos dirigidos por la fuerza. En esencia, es un simulador (simulación) que contiene tres gráficos, a saber, nodos, fuerzas y restricciones del mundo físico que se va a simular. También utilizamos la familia de modelos de fuerza forceLink, forceManyBody y forceCenter de D3 para simular el modelo gráfico dirigido por la fuerza. Definimos el tamaño, el estilo y la posición de cada nodo y manejamos eventos de arrastrar y soltar, así como efectos dinámicos para cada elemento.
Paso 5: Modificar los estilos
Finalmente, necesitamos modificar algunos estilos para crear hermosos gráficos dirigidos por la fuerza. Esto incluye modificar el color, el tamaño y la forma de enlaces y nodos, así como agregar efectos de animación. Aquí hay un ejemplo simple de estilo CSS:
.linksline{
stroke: #999
stroke-opacity:
; }
.nodescircle{
trazo: #fff;
ancho de trazo: 1,5 px; p> Espero que este artículo le haya ayudado a comprender cómo crear gráficos dirigidos por fuerza utilizando D3, una biblioteca de visualización de datos muy poderosa y flexible que puede ayudarlo a visualizar sus datos de varias maneras. Si desea obtener una comprensión más profunda de cómo funciona D3, consulte la documentación oficial en https://d3js.org/.