sigma.js

.gexf -format node graph visualization

让人想犯罪 __ 提交于 2020-01-03 04:50:11
问题 To visualize a node graph Sigma.js looks fantastic. I tried some examples but can't get my graph to display. I used example code and tried to plug in my .gexf file, but nothing displays. This is what I took from the Sigma.js example : function init() { // Instanciate sigma.js and customize rendering : var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({ defaultLabelColor: '#fff', defaultLabelSize: 14, defaultLabelBGColor: '#fff', defaultLabelHoverColor: '#000

How do I show edge labels on graphs?

空扰寡人 提交于 2019-12-30 05:08:35
问题 I am trying to load a gexf file with sigInst.parseGexf('data/test.gexf'). To create an edge with label I have this line in gexf file: <edge label="test" id="7" source="14" target="18" type="directed"/> but seems that sigma.js ignore this label field. How can I show edge labels in graphs? 回答1: It's not yet possible with the main sigma.js library. However, I just forked the repository and added the capability on github.com here: https://github.com/sam2themax/sigma.js To enable this new feature,

Adding custom images to nodes

强颜欢笑 提交于 2019-12-22 15:49:15
问题 Using Sigma.js I want to add custom images to the graph's nodes. I found a plugin, included nodeShapes.js and plotter.js, then added an image attribute : var imgUri="somepicture.png" sigInst.addNode(id,{ 'x': Math.random(), 'y': Math.random(), 'label': data.nodes[i].val, // 'color': color, commenting this line out to add custom images to the nodes 'image':{'url':imgUri}, 'cluster': clusters['cluster_id'] }); But the graph remains unchanged and I still see the default dots. 回答1: You should

Adding sigma.js navigation buttons

送分小仙女□ 提交于 2019-12-21 05:32:19
问题 I'm new to javascript and sigma.js, and I'm trying to get navigation buttons to scroll up/down/left/right in the canvas, much like what is found here So far, I have a simple example that I'm trying to get working on jsfiddle: http://jsfiddle.net/dpmartin42/kSkkG/16/ I'm using the following line of code I found on GitHub and am trying to build off of it: $('[data-action="up"]').bind('click', function(e) { // With "inst" our sigma instance: var newPos = inst.position(); newPos.stageY += 80;

Graph visualization frameworks

蓝咒 提交于 2019-12-19 12:21:53
问题 I want to visualize a Neo4j database in a graphical application. (I'm doing this primarily as a learning exercise). I want it to behave almost identically to the visualization in Neo4j's WebAdmin: When the graphic appears, I want to see the nodes moving around as they settle into their final locations, and I want the user to be able to click and drag node icons around the screen and have them stick where they are dropped, with the rest of the graph adjusting to account for the change. I have

Graph visualization frameworks

自古美人都是妖i 提交于 2019-12-19 12:21:37
问题 I want to visualize a Neo4j database in a graphical application. (I'm doing this primarily as a learning exercise). I want it to behave almost identically to the visualization in Neo4j's WebAdmin: When the graphic appears, I want to see the nodes moving around as they settle into their final locations, and I want the user to be able to click and drag node icons around the screen and have them stick where they are dropped, with the rest of the graph adjusting to account for the change. I have

JSON is not read by sigma.js

本秂侑毒 提交于 2019-12-18 13:33:06
问题 I have this page <html> <head> <style type="text/css"> #container { max-width: 800px; height: 800px; margin: auto; } </style> </head> <body> <div id="container"></div> <script src="sigma.min.js"></script> <script src="plugins/sigma.parsers.json.min.js"></script> <script> sigma.parsers.json('graph.json', { container: 'container', settings: { defaultNodeColor: '#ec5148' } }); </script> </body> </html> which works fine loading the first example graph provided here and below { "nodes": [ { "id":

Can't display any graph with Sigma.js

╄→尐↘猪︶ㄣ 提交于 2019-12-12 08:45:24
问题 I want to visualize a large network graph on a web interface. After a few days of search, I decided to use Sigma.js because it looks simple and it's HTML5 compatible. The problem is that I can't display any graph example from Sigma.js web page, even when I use the minimal code that the author has on Sigma.js's homepage. I even copy-pasted entire web pages, with right click-view code, but in vain (like this). I have pasted all the necessary files in the same folder that the simple .html file

Producing a Canvas output from NetworkX

烂漫一生 提交于 2019-12-12 02:38:35
问题 The advantage of using matplotlib with NetworkX is the ease with which one can produce PDF, PNG, and SVG outputs. import networkx as nx import matplotlib.pyplot as plt G1 = nx.Graph() G.add_nodes_from(["a", "b"]) G.add_edge("a", "b") nx.draw_networkx(G) plt.savefig("graph.pdf") plt.savefig("graph.png") plt.savefig("graph.svg") How can this code be modified to produce HTML5/Javascript Canvas code? Concrete code, however trivial, is more helpful than rooting for a given library. Sigmajs seems

Zoomable network graph in AngularJS

社会主义新天地 提交于 2019-12-04 07:44:22
问题 I would like to visualize a network graph in an AngularJS application. The nodes and edges are stored as a JSON object, and nodes will be added and modified later on (say once every 30 seconds). I want to use Angular data binding to automatically update the graph when the JSON object changes. The graph will have 10-1000 nodes. The nodes will be rectangular text nodes containing about a sentence each. I would like the graph to be zoom- and pan-able. I know about the following options so far: