Construyendo gráficos dirigidos por fuerza desde solo datos de enlace

Question

Soy un poco nuevo en d3.js, pero me estoy divirtiendo bastante. Hasta ahora, he implementado un gráfico dirigido por la fuerza que está muy cerca de muchos de los ejemplos y tutoriales que existen.

interés directo

Al igual que muchos de los ejemplos, que tienen una estructura JSON como esto:

{"nodes": ["node1", "node2", ... ], 
"links": [{source: 0, target: 1, "field1": 5, ...}, ... ]} 

Sin embargo, creo que sería más fácil de construir mis fuentes de datos como esto:

{"links": [ 
    {source: "node1", target: "node2", "field1": 5, ...}, 
    {source: "node2", target: "node4", "field1": 1, ...}, 
    {source: "node3", target: "node4", "field1": 8, ...} 
]} 

En lugar de definir explícitamente los nodos en mi gráfico, se definen implícitamente en las estructuras de enlace.

La Razón

quería listar el objetivo final del proyecto en caso de que alguien tenía un código de ejemplo específico o idiomática manera de hacer esto de los cuales no tengo conocimiento.

El objetivo para el proyecto sería eventualmente un gráfico que se actualiza en tiempo real. El back-end se está desarrollando y está sujeto a algunos cambios y revisiones.

Por el momento, me estoy imaginando arrastrando una actualización JSON cada X segundos y actualizando la estructura de ese gráfico con la nueva información. El feed extraído solo contendría las estructuras actualizadas del gráfico, por lo que el script necesitaría mantener todos los nodos y enlaces ya extraídos y agregar los nuevos, si fuera necesario.

Gracias!

Pido disculpas si esto se ha preguntado antes. Hice algunas búsquedas y no encontré nada. Siéntase libre de insultarme y reprenderme si me lo perdí.

Answer 1

que he tenido que hacer esto un par de veces. El enfoque más simple que he encontrado ha sido simplemente calcular el conjunto de nodos base en la lista de enlaces y luego convertirlo en una matriz para usar el gráfico de fuerza:

var links = [ .... ]; 
var nodeMap = {}; 
links.forEach(function(d, i) { 
    nodeMap[d.source] = true; 
    nodeMap[d.target] = true; 
}); 

var nodes = []; 
for (key in nodeMap) 
    nodes.push(key); 

d3.layout.force() 
     .nodes(nodes) 
     .links(links); 

Answer 2

He hecho esto en el ejemplo "D3 Based Force Directed Radial Graph". Hago esto porque quiero entender cómo se usan los datos, internamente, independientemente de estructuras como JSON y CSV, que siempre se pueden superponer en capas, más adelante.

De todos modos, espero que el ejemplo te ayude.

mi mejor,

Frank