2012-07-13 10 views
8

Jestem trochę nowy w d3.js, ale mam z tego trochę zabawy. Do tej pory zaimplementowałem wykres ukierunkowany na siłę, który jest bardzo zbliżony do wielu przykładów i tutoriali.Konstruowanie grafów kierowanych siłą Tylko z danych linków

bezpośredniego oddziaływania

Podobnie jak wielu przykładów, mam struktury JSON tak:

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

Myślę jednak, że byłoby łatwiej konstruować swoje źródła danych, takie jak to:

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

Zamiast jawnie definiować węzły na moim wykresie, są one niejawnie zdefiniowane w strukturach łączy.

Powód

Chciałem wymienić Ostatecznym celem projektu w przypadku, gdy ktoś miał jakiś konkretny przykładowy kod lub idiomatyczne sposób robi to z czego jestem nieświadomy.

Celem projektu będzie ostatecznie wykres aktualizowany w czasie rzeczywistym. Back-end jest rozwijany i podlega pewnym zmianom i rewizji.

W tej chwili wyobrażam sobie, że co X sekund ściągam aktualizację JSON i aktualizuję strukturę tego wykresu o nowe informacje. Wyciągany plik danych zawierałby tylko zaktualizowane struktury wykresu, więc skrypt musiałby zachować wszystkie już wyciągnięte węzły i łącza oraz dodać nowe, jeśli to konieczne.

Dzięki!

Przepraszam, jeśli wcześniej ktoś o to prosił. Szukałem czegoś i niczego nie znalazłem. Możesz mnie znieważić i skrytykować, jeśli za tym tęsknię.

Odpowiedz

4

miałem to zrobić kilka razy. Najprostszym podejściem, jakie znalazłem, było po prostu obliczenie zestawu węzłów na podstawie listy linków, a następnie przekształcenie go w tablicę do użycia wykresu siły:

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); 
4

Zrobiłem to właśnie w przykładzie "D3 Based Force Directed Radial Graph". Robię to, ponieważ chcę zrozumieć, w jaki sposób dane są wykorzystywane wewnętrznie, niezależnie od struktur takich jak JSON i CSV, które zawsze mogą być warstwowane później.

W każdym razie mam nadzieję, że przykład pomoże.

My Best,

Frank

Powiązane problemy