jacomyal / sigma.js Goto Github PK

I am experiencing a problem with line 161 of graph.js (line 500 of generated sigma.concat.js):

case 'label':
node[k] = copy[k].toString();

Error:
copy[k] is undefined

It occurs when I hover over an object when trying out the javascript taken from the parse_object.html example. I am using my own .gexf dataset.

I've taken a screenshot of the DOM info from firebug for the function `checkNode' after I have hovered over a node to cause the error, here:

http://www.macs.hw.ac.uk/~rs46/images/firebug.png

I'm trying to implement a "search" function through the graph. Given the ID of a node, I want to find it and then center and zoom the graph on it. I've tried with zoomTo(n['displayX'],n['displayY'], 5), but it works into a kind of "approximation" way. Running many times the search function, slowly "converges" to the solution. That is, each time I run the function, it goes closer and closer to the node. Any suggestion? Here it is the code:

function searchNode() {

sigma.instances[1].iterNodes(function(n){
if(n.label==document.getElementById('searchbox').value){
sigma.instances[1].zoomTo(n['displayX'],n['displayY'],5);
}
}).draw();

}

Thanks,
Rob

Hi,

I'm currently using sigmajs for a visualisation project (http://bit.ly/Ol8nzk) and I have a weird bug trying to add the "Hide node" code snippet featured in the example section.

In some undetermined cases, when the cursor goes above multiple nodes, the whole graph disappears.

Also, Chrome will display a warning in some occasions. (The previous bug occurs doesn't make it systematically appear).

Chrome JS console Warning:

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

I tried a quick fix:
http://bugs.jquery.com/ticket/10531
... they suggest to replace event.layerX with event.originalEvent.layerX and if used, to check if it's undefined.

And indeed I have the following error:

Chrome JS console Error:

Uncaught TypeError: Cannot read property 'layerX' of undefined sigma.min.js:12
b.addEventListener.a.p.mouseEnabled.a.isMouseDown sigma.min.js:12
Uncaught TypeError: Cannot read property 'layerY' of undefined sigma.min.js:13
b.addEventListener.a.p.mouseEnabled.a.isMouseDown

Please feel free to look at the code (http://bit.ly/L0Db9a).

I may have done something wrong...

It seems that examples from http://sigmajs.org/examples.html do not work in IE8
Is it possible to provide support for IE?

I raised this question on stackoverflow. Can anyone comment?
//
I want to represent my wordpress and github activity as a graph network using the javascript library Sigmajs. I am using the google feed api to get RSS feeds of all activity and translating them into nodes and edges on the graph.

But the feed api returns rss results asynchronously. As far as I know sigmajs does not natively support this so im getting undefined references. Some possible solutions are:

Force google feed api to return results synchronously. (not sure how to do this but im assuming it has something to do with appropriate closures?)

Create sigma instance for every feed result and push all graph objects into a single instance. (Not sure its possible and library not well documented enough to try)

Fire an event each time result is returned to ensure sigma only processes one at a time. (Again, not sure how to go about doing this)
//

Use the X,Y coordinate attribute of node to project graph into openlayer, or other geographic vizualisation library

For our use case we need to force a certain node to draw their label, like if the mouse was hovering there. I was digging more or less into the source code / examples, but found not final clue.

My use cases is as simple as I want to print the node label.

Thanks

• purbon

The Graph.dropEdge function does not decrease the degree of the edge extremities.

Currently it seems to automatically optimize the zooming and centering, which is convenient in most cases, especially for datavis, but it make it difficult to use this library for design

If we could have a better way of controlling all of that stuff programatically, I think that'd be neat!

Currently, node border become visible on activated nodes only.

Is there a node attribute to set for enable a node's border? The source code has no reference about it.

I try to modify your smart example using forceatlas2 but I do not see how to get access to the property of the class once the startForceAtlas2() is called.

Best

eric

plotter.js has defaultHoverLabelColor but defaultNodeHoverColor

When running forceAtlas with the "les miserables" gexf file from the examples, some nodes often get positioned outside of the canvas.

Is there a way to instruct forceAtlas not to move nodes outside of the canvas, i.e. to limit the xy positions of the nodes?

Is it possible to visible display the direction of an edge (eg with an arrow, or a colour gradient)?

I see edge direction as being pretty important in a lot of graphs.

D3.js utilizes the svg path and marker to do this, I read the sigma plotter code but could only see support for lines and curves, nothing directional, did I miss something?

I think directed edges would be a very useful addition to a great (and impressively fast) lib, in my use case it would make it perfect :-)

By looking at http://matthieu-totet.fr/cac40/
I realize that I would like more info on each node. When a mouse is over a node, one could see node's attributes under the name.

Hello everyone,

first: Thanks and compliments for the great sigma.js!

I have a problem: My graph renders bigger (maybe 2-3%) than the canvas size. That means that the graph overlaps the canvas windows and some nodes at the border disappear. Is there any way to fix this problem or to add a padding for the graph in the canvas?

All best,
J

I'm trying to load a gexf file using an abs url (because it is on a different server). But it seems not working. Is this feature supported? Thanks!

sigInst.parseGexf('http://sigmajs.org//data/arctic.gexf');

Hi,

Is there a right way to execute one layout (fa2) right after another? I need to apply a different layout parameter after the first execution.

Currently I'm using startLayout( ... setTimeout(startLayout(), milliseconds)) with a condition to stop the loop. However the second startLayout executes but stop immediately if I don't delay its execution.

It's a dirty hack and I guess I have conflicts in the layout internal events.

For the past half an hour I've been trying to get an example working. There really should be a simple, but COMPLETE example.

I first tried to play around with jsfiddle.net. When that didn't work, I tried to run a simple example on my local machine, even that doesn't work (I just get an empty page with no errors in the console).

My code is here, you are welcome to use it (just surrounds sample 'snippet' with html tags--note that I only brought jquery into it to make sure my page was ready, before attempting to add a network):

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://sigmajs.org/js/prettify.js"></script>
    <script type="text/javascript" src="http://sigmajs.org/js/sigma.min.js"></script>
    <script>
        $(document).ready(function() {
            var sigRoot = document.getElementById('sig');
            var sigInst = sigma.init(sigRoot).drawingProperties({
              defaultLabelColor: '#ccc',
              font: 'Arial',
              edgeColor: 'source',
              defaultEdgeType: 'curve'
            }).graphProperties({
              minNodeSize: 1,
              maxNodeSize: 10
            });

            sigInst.addNode('hello',{
              label: 'Hello',
              color: '#ff0000'
            }).addNode('world',{
              label: 'World !',
              color: '#00ff00'
            }).addEdge('hello_world','hello','world').draw();
          });
    </script>

</head>
<body>
    <div id="sig">
        <canvas width="1170px" height="216px">
    </div>

</body>
</html>

It would be useful to get the Sigma instance attached to a DOM element. Something like:

function getInstance(dom) {
    return sigma.instances[dom];
}

http://stackoverflow.com/questions/9490003/web-based-large-scale-graph-drawing-library

Hi.

When using sigma.js from within mobile safari, on each "click" the whole canvas gets highlighted and behaves very irresponsive.

Instead of statically binding to the standard events mousedown, mousemove and mouseup, there should be (optional?) support for touchstart, touchmove and touchend.

Maybe the following post could provide a clean (mostly hack-free) and cross-browser-enabled feature detection mechanism for the event types in question? http://perfectionkills.com/detecting-event-support-without-browser-sniffing/

That way sigma.js would use touch where touch is due and click otherwise.

My gexf imported graph disapprears randomly sometimes on mouseover sometimes on mouseout. Can this be related to problems with a bigger graph around 800 nodes and 2500 edges?

I implemented hidding nodes on mouse over from this example:

http://sigmajs.org/examples/hidden_nodes.html
and used exactely the code from the example

// Bind events :
sigInst.bind('overnodes',function(event){
   var nodes = event.content;
   var neighbors = {};
   sigInst.iterEdges(function(e){
      if(nodes.indexOf(e.source)>=0 || nodes.indexOf(e.target)>=0){
         neighbors[e.source] = 1;
         neighbors[e.target] = 1;
      }
   }).iterNodes(function(n){
      if(!neighbors[n.id]){
      n.hidden = 1;
      }else{
      n.hidden = 0;
      }
   }).draw(2,2,2);
}).bind('outnodes',function(){
   sigInst.iterEdges(function(e){
      e.hidden = 0;
   }).iterNodes(function(n){
      n.hidden = 0;
     }).draw(2,2,2);
   });

Hi,
I'm trying to change the color of edges in a graph I created using Sigma.js. The data is from a GEXF file where I define the color of every edge but in vain. I also tried adding the following code

sigInst.iterEdges(function(edge) {
edge.color = '#333';
});

which I found here in an example, but the graph keeps coloring the edges with the source's color (as I can understand, with "source" it means "nodes", so that's why I'm getting red edges -because of the red nodes). What am I doing wrong?

shouldn't line https://github.com/jacomyal/sigma.js/blob/master/src/core/plotter.js#L283 be modified to take into consideration defaultNodeColor ?

Hi,I've trying to visualize a network,converted mysql query to json,and I want to know is it possible to use the Json file to fill the graph?
how is it possible ?
Thank you

When a node has an edge that is supposed to reference itself a "Selfloop" edge is not rendered. Please see edge 2 in the repro below.

Repro:

<?xml version="1.0" encoding="UTF-8"?>
<gexf xmlns="http://www.gephi.org/gexf" xmlns:viz="http://www.gephi.org/gexf/viz">
<meta lastmodifieddate="2012-10-17">
  <creator>Test Case For Selfloop Issue</creator>
  <description>Test</description>
</meta>

<graph type="static">
  <attributes class="node" type="static">
    <attribute id="0" title="nodedef" type="string"/>
    <attribute id="1" title="label" type="string"/>
    <attribute id="2" title="occurrences" type="integer"/> 
  </attributes>

  <nodes>
    <node id="0" label="node0">
      <viz:color b="51" g="51" r="255"/>
      <viz:position x="1.1" y="1.1" z="0.0"/>
      <viz:size value="3.6"/>
      <attvalues>
        <attvalue id="0" value="n0"/>
        <attvalue id="1" value="1831"/>
        <attvalue id="2" value="1"/>
      </attvalues>
    </node>

    <node id="1" label="node1">
      <viz:color b="51" g="51" r="255"/>
      <viz:position x="1" y="1" z="0.0"/>
      <viz:size value="10.138098"/>
      <attvalues>
        <attvalue id="0" value="n1"/>
        <attvalue id="1" value="New York"/>
        <attvalue id="2" value="143"/>
      </attvalues>
      </node>
  </nodes>

  <edges>
    <edge id="0" source="0" target="1"/>
    <edge id="1" source="1" target="0"/>
    <edge id="2" source="1" target="1"/>
  </edges> 
</graph>

</gexf>

GEXF 1.2 draft[1] states:

Edges with only one endpoint, also called loops, selfloops, or reflexive edges,
are defined by having the same value for source and target.

[1]gexf.net/1.2draft/gexf-12draft-primer.pdf

This is a corner case, but I figured I'd report it anyway. If you add an edge between two nodes, and one of the nodes has an id named "target" the drawing algorithm has problems rendering all of the edges in the graph.

Does the plugin sigma.parseGexf.js support IE? When I try to open the example with GEXF file using IE9,it can't display the chart ? Is my settings wrong? When I try to debug this,I got an error: "the object has not such function ' getElementsByTagNameNS' ".In one word, i just want to use IE to load gexf files using namespace 'viz', HOW TO ? THX

When a node and/or an edge is hidden (i.e., has hidden == 1), does forceAtlas still consider it for attraction and repulsion?

I wrote a small change that seems to avoid considering hidden nodes and edges, but i wanted to be sure before submitting another pull request :)

Not that i care much about IE, but it seems like an issue with its handling of xml data; will try and see if i can get it working later today.

Hi, how can I implement Zoom In and Zoom Out (just to the center) Buttons?
Thank you,

best Julius

Does anyone know how to apply borders to nodes?

Hi,

Is there a way to edit sigma.js source code and use it without compilation?

Hi- I have a question. We've created a web version of a network graph authored in Gephi. The issue is that we can't zoom out to see the full visualization. Is there some advice you can give us? Thanks!

http://www.stanford.edu/group/ecowest/dev/Zoomed%20CA%20Water%20Org%20Graph/zoomout.html

Hi,

In Gephi, the ForceAtlas2 pushes isolated nodes to the border, and keep connected nodes at the center. The Sigmajs plugins does the opposite, which is confusing regarding to the central position of these isolates.

I've played with a lot of settings but failed to push isolates at the border. Hence something might be wrong in the implementation.

Has somebody be able to push isolates out of the center?

Is there a way to reset the stage?

Each time I use

sigma.position(0, 0, 1)

and then check against

temp = sigma.position()
temp.stageX

stageX is cumulative and continues adding ..

How do I set stageX back to 0?

Can anybody explain what the point of cloning a node is?

The label offset is also set to the right of the node. I wonder can we move it to the center/below the now?

Hi,

I'd like to add edge events in order to select edges directly. How hard is it?

Is this feature hidden or not coded yet? It would enable the use of Sigma.js to show flows (humans, money...) like here:

https://www.nytimes.com/interactive/2011/10/23/sunday-review/an-overview-of-the-euro-crisis.html

Hi,

This seems a bug because I assume {x=0, y=0} is a valid node coordinate.

However sigma throws the following exception: "A node's coordinate is not a number".

I've only found this error message on sigma.min.js, at the line:

if (isNaN(a.x) || isNaN(a.y)) throw Error("A node's coordinate is not a number (id: " + a.id + ")");

I don't know where the function isNaN comes from (maybe the compiler?), but it may be the cause of the issue.

EDIT: the issue happens only if a node is not initialized with x = y = 0, or if x and y are not set.

e.g. this works:

var node = {label:label, x:1, y:1, attributes:[]};
addNode(id, node)

not this:

var node = {label:label, attributes:[]};
addNode(id, node)

nor this:

var node = {label:label, x:0, y:0, attributes:[]};
addNode(id, node)

Mouse events do not fire when drawHoverNodes is set to false.

Hi,

I whant to change position clicked node in the middle of the screen and change ratio. Function "zoomTo" probably not work correct or I don't now how to use them.

Trying to bring a .gefx file into the browser using sigma.parseGefx.js. Firefox throws up "Access to restricted URI denied" and points me to gexfhttp.send();. The HTML is pointing to sigma.js and sigma.parseGefx.js, as well as my own js which is just cut and paste from the sigma.js website (replacing my own .gefx file for the test file on the site, of course). Any help?

Is it possible to replace node circles by images?

Hi,

My Sigmajs becomes unresponsive and edges are not displayed if I start a layout, visit another page, then come back and see the layout automatically stopped, due to this code:

setTimeout(function () {
  isLayoutRunning = false;
  sigInst.stopForceAtlas2();
}, 5000);

I'm using Chrome 20.0.1132.57 m.

Is it possible to show arrows to see node input and outputs in graph? Thanks.

Hi,

I'd like to see even small labels, without having to zoom too much. Example:
http://sigmajs.org/examples/parse_data.html

On this graph, I must zoom a first time to see "Valjean", then several more times to see the other less important characters.

My question is, which parameter could I change so that I see even small labels when the graph is first displayed.

On twitter you advised me to use the property "defaultLabelSize", but it does not change the level of zoom (with a large value, you still have to zoom as much as for a small value to see small labels appear - quite surprisingly!).

Is there another property I could change to have the desired effect?

Is it possible to change the color of a node after the initial draw?