I'm looking at sigma.js for potentially replacing vis.js as our big data graphing library of choice. One of the deal breakers is hierarchy views of the network. I don't see anything besides this old issue #162 that says it's not possible, but potentially getting worked on. That was 3 years ago. Any word on this?

Let's interact with edges! They are no second-class citizen anymore. This code works with all edge types provided by default in sigma.js.

How it works

Edges are indexed in a quad tree. Indexing and querying this quad tree is deactivated when the ForceAtlas2 is running, on node drag, and on animation. The quad tree is updated at the end of these actions.

New events

overEdge, outEdge, clickEdge, overEdges, outEdges, clickEdges

New settings

• enableEdgeHovering
• edgeHoverColor
• edgeHoverSizeRatio
• defaultEdgeHoverColor
• edgeHoverHighlightNodes

Features

Hovered edges can be drawn on the canvas hover context (enableEdgeHovering) with the ability to change their color (edgeHoverColor, defaultEdgeHoverColor) and size (edgeHoverSizeRatio). The node extremities of hovered edges can be hovered at the same time by setting edgeHoverExtremities to true.

I am using sigmajs to render some large graphs (30K edges). When I export sigmajs package from Gephi it works great (it uses an older version of sigmajs which is bundled with gephi). However when I load the same graph in the latest version of sigmajs the performance is much slower. Are there some specific flags enabled in the version of sigmajs that ships with gephi or is the new version of sigmajs slower as compared to the older version (v0.1).

I imported the sigma.js with Webpack and ES6 syntax:

import { sigma as Sigma } from 'sigma';

but I can't import plugins like this:

import 'sigma/build/plugins/sigma.parsers.json.require.js';
or
import 'sigma/build/plugins/sigma.parsers.json.min.js';

referenced: #799

I am unable to get the example working with angular 2.

Steps to reproduce:

1. npm install sigma
2. Create angular component (with angular-cli): ng g component about
3. Add the following code to the component:

 import { Component, OnInit, AfterViewInit } from '@angular/core';
 const sigma = require('sigma');
 require('../../../../node_modules/sigma/build/plugins/sigma.parsers.json.min.js');

  @Component({
    selector: 'ib-about',
    templateUrl: './about.component.html',
    styleUrls: ['./about.component.scss']
  })
  export class AboutComponent implements OnInit, AfterViewInit {
  constructor() { }

    ngOnInit() {
    }
    jsonData = { copy of the example data on sigmajs.org page } 
    ngAfterViewInit() {
      sigma.parsers.json(this.jsonData, {
        container: 'container',
        settings: {
          defaultNodeColor: '#ec5148'
        }
    });

I get the following error:

Is there a reference Angular 2 implementation for this?

Hi,

I added a plug-in called sigma.nodeShapes - demo / intro code sample here: https://dl.dropboxusercontent.com/u/45136256/sigma.js/nodeshapes.html

the plug-in itself adds more node drawing functions for:

• square
• triangle
• diamond
• star (configurable number of points and inner radius)

In addition, the plug-in exposes an API to add additional custom shapes - also shown in demo with a 'Pacman' node.

All node drawing functions keep the shape bounded in the node size radius. This is important for keeping the rest working - mouse click and hover, force atlas, arrow edges, etc.

Last - the plug-in adds the ability to draw images on nodes, demonstrated as well. This addresses issue #83

This plugin is based on minimal changes to plotter - needed to expose the functionality that currently draws circle for regular, active, and hover nodes (as well as borders). no changes to node attribute were made - the attributes for shape and image drawing are piggybacked on the node.attr bag.

_NOTE_: post-mortem I noticed the file changes for plotter.js shows a lot of false diffs, due to auto-indent in my vi editor. I believe these are good indentations but can provide a non-indented version if you prefer. To help you review the code - I added a note next to each REAL code change (see under Files Changed tab)

I'm getting a security error in the console and the layout algorithm doesn't work in Internet Explorer 11. I believe it may be this issue associated with webworkers in IE10 and IE11: http://stackoverflow.com/questions/10343913/how-to-create-a-web-worker-from-a-string

Since I'm on Linux though I run IE11 in a VM and it's a bit difficult for me to debug properly.

Hey there.

I am currently evaluating a bunch of different graph drawing libraries and I wanted to add sigma.js v2 to my stack. I tried running the basic example but I am always greeted with this error:

Error: sigma/renderers/weblg/shaders/utils.loadShader: error while compiling the shader:
ERROR: 0:1: '/' : syntax error

weblg is a typo in your exception message btw

I run the example code within a React App using the following packages:

• "sigma": "^2.0.0-alpha20"
• "faker": "^4.1.0"
• "graphology": "^0.14.1"
• "graphology-generators": "^0.10.1"
• "graphology-layout": "^0.1.0"
• "chroma-js": "^2.0.2"

Does anyone have an idea how to fix this?

Cheers, Lukas

Ps: All examples use the WebGLRenderer, will you implement a Canvas Renderer for v2? Or is this the same (I saw it renders as canvas in the examples)?

Hi, im trying to view a exported gexf but i got this error:

gexf-parser.js:205 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

LINE 205: root: xml.getElementsByTagName('gexf')[0],

This is the GEXF:

TEST-20160111-20160111--------interactionGraph-min-4-nodes-45cd6cf41f.gexf.zip

Any idea how to proper view gexf exported?

Regards!

update: just to illustrate what I got, a picture is attached below.

I have a small network of 3 nodes and 2 links. When starting the forceatlas2 layout, the middle node is jumping around like crazy. I can make it calm down by setting 'slowDown' to say 1000, but it is kind of hacky. I am using the default parameters. Is that the problem or is it a bug?

Thank you.

Svg renderer support was mentioned in the following issues that it was already planned, but the last update was in June. https://github.com/jacomyal/sigma.js/issues/33 and https://github.com/jacomyal/sigma.js/issues/310

I was wondering when svg renderer support would be available?

Pull request type

Check the type of change your PR introduces:

• [ ] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, renaming)
• [ ] Refactoring (no functional changes, no api changes)
• [ x] Build related changes
• [ ] Documentation content changes
• [ ] Other (please describe):

NOTE: Before to create a PR, read our contributing guide

NOTE: Try to limit your pull request to one type, submit multiple pull requests if needed.

What is the current behavior?

Curved and curvedArrow links are not working in canvas for npm package because in Gruntfile.js dotCurved.js and dotCurvedArrow.js are referenced and they do not exist.

NOTE: Describe the current behavior that you are modifying, or link to a relevant issue.

Gruntfile.js updated and in the resulting build both link types work.

NOTE: Describe the behavior or changes that are being added by this PR.

Gruntfile.js now points to dotCurve.js and dotCurvedArrow.js

NOTE: Any other information that is important to this PR such as screenshots of how the component looks before and after the change.

@jacomyal this PR adds the #.setCamera method. A typical use-case is to make sure two sigma renderers share the same camera and have synchronized camera movements (like it is required for ipysigma's small multiples. I tried something lock-based but the way the Camera fires events, based on actual changes, makes this nontrivial and sharing a camera seems more obvious).

I did not add a camera setting but it might be useful to add here all the same? What do you think? The thing is that it might be awkard to deal with #.setSetting then in this configuration (the same could be said about the programs settings by the way).

Also I guess this method should schedule a render?

Scanning the website and github, all I see are examples. But it's kind of hard to know where to start from just examples, are there any pages that document available methods to call, interactions w/ graphology, etc?