2015-02-25 1 views
0

Я пытаюсь реализовать график, используя sigma.js, но я не уверен, как это сделать. Где я могу разместить сегмент Data? Это код javascript?Где и как использовать код сегмента данных?

HTML

<html> 
<head> 
<style type="text/css"> 
    #container { 
    max-width: 400px; 
    height: 400px; 
    margin: auto; 
    } 
</style> 
</head> 
<body> 
<div id="container"></div> 
<script src="sigma.min.js"></script> 
<script src="sigma.parsers.json.min.js"></script> 
<script> 
    sigma.parsers.json('data.json', { 
    container: 'container', 
    settings: { 
     defaultNodeColor: '#ec5148' 
    } 
    }); 
</script> 
</body> 
</html> 

данных:

{ 
    "nodes": [ 
    { 
     "id": "n0", 
     "label": "A node", 
     "x": 0, 
     "y": 0, 
     "size": 3 
    }, 
    { 
     "id": "n1", 
     "label": "Another node", 
     "x": 3, 
     "y": 1, 
     "size": 2 
    }, 
    { 
     "id": "n2", 
     "label": "And a last one", 
     "x": 1, 
     "y": 3, 
     "size": 1 
    } 
    ], 
    "edges": [ 
    { 
     "id": "e0", 
     "source": "n0", 
     "target": "n1" 
    }, 
    { 
     "id": "e1", 
     "source": "n1", 
     "target": "n2" 
    }, 
    { 
     "id": "e2", 
     "source": "n2", 
     "target": "n0" 
    } 
    ] 
} 

ответ

2

Это URL. В этом случае data.json является файлом в том же каталоге, что и ваш HTML-файл. Если вы хотите использовать JSON в коде, а не из отдельного файла, вы можете сделать:

new sigma({ 
    container: 'container', 
    graph: graph 
}); 

где является объектом JavaScript.

EDIT: динамически добавлять график:

var s = new sigma('container'); 
s.graph.read(graph); 

(Вы также, возможно, потребуется s.graph.clear() и s.refresh())

+0

Я хочу, чтобы динамически добавлять график, когда кто-то нажимает на контейнер. Как я могу это сделать? –