Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Node borders #49

kirkstrobeck opened this Issue Aug 30, 2012 · 14 comments


None yet
6 participants

Does anyone know how to apply borders to nodes?


computermacgyver commented Sep 30, 2012

It's not currently possible without modifying the core code. I've done this and will try to post the updated code soon.

Hi, I would also be interested in that. Is there any news? Thank you.
Best Julius


computermacgyver commented Oct 15, 2012

This might shift slightly after I have a conversation with a collaborator, but the code at the branch below allows you to turn on borders.

The following settings are important to set for the drawing properties

            ...//other properties here
            "borderSize": 1,//Something other than 0
            "nodeBorderColor": "default",//exactly like this
            "defaultNodeBorderColor": "#000",//Any color of your choice
            "defaultBorderView": "always"//apply the default color to all nodes always (normal+hover)

The above will enable the node border on all nodes. A collaborator to our fork also enabled a per node basis of allowing node borders (e.g. some nodes could have a border while others didn't). To only show borders for some nodes, set the drawBorder property of the nodes to true and do not change "defaultBorderView" from its default ("node").

Finally, it's important to note that while the original sigma code stored extra values in a attr array attached to each node. The fork linked above stores them directly in the node. Thus, if you passed in an array called "attributes" when creating a new node with the old code this would be stored under node.attr.attributes . With the code in my fork it is stored simply under node.attributes.

Thank you. It works. But only if I hover over the nodes. How can I set the borders to default for the start screen?


computermacgyver commented Oct 15, 2012

Did you check out the new fork I linked above and compile it to a new sigma.min.js? If not, it won't work.

If you'd rather just download a new sigma.min.js, you can find one here

Here's an example of changing the example at
to have borders (this time white given the dark background)

If the problem persists with the new sigma.min.js file, can you post your configuration?

Hey, thank you. It's working with the new sigma.min.js. Great. But now, on overnode every edge is grey instead of highlighting the connections to the other edges. The problem is also in your example: http://oxfordinternetinstitute.github.com/sigma.js/fromsig/

Thanks again for your help. Really appreciate that.


computermacgyver commented Oct 16, 2012

You're absolutely right. I've fixed that and a new sigma.min.js file at the same location.
The example works as it should. I was previously returning the full node object for each edge's source and target instead of just the id (which is what the original sigma code does). I've fixed this. This is unrelated to borders but was related to changes I made to avoid doubling nesting parameters within attr.

Thanks a lot for this info! However, I would like to define the border color of each node according to a 2nd category... is it possible?
Ex: node color = actor type (association, company...)
node border color = position of the actor about a specific subject (for, against...)


computermacgyver commented Apr 3, 2013

Not with the code that I wrote earlier, but it should be an easy change to extend it. This is the line that would have to change, where the color is selected. I think the best way to do this is if nodeBorderColor is 'node' use the node color, if it is 'default' use defaultNodeBorderColor, otherwise look for the a node attribute with the name of whatever is stored in nodeBorderColor.

Then we could set nodeBorderColor to say, 'border_color' and assign each node a value for the 'border_color' attribute.

Is this still something you're looking for? If so I can try to do this later.

smfnunes commented Apr 8, 2013

It's exactly that! Let me know if you manage to do it, I can also try but I must admit I quite foreign to this code language... :)


jacomyal commented Jan 12, 2014

Here is how custom node renderers work in the new version of sigma:

Everyone wants different ways to render nodes, but I cannot merge everything in the core. So, from now, it is easy for you to develop custom node renderers on the fly or as plugins for your specific needs. I just added an example with a renderer that draws images instead of discs, to show how it works.

Also, about the attributes, there is no more attr sub-object to store custom attributes, and no more cloning as well (except when the data are added).

@jacomyal jacomyal closed this Jan 12, 2014

Hi Everyone,

I want to implement the border around the node feature. I was successfully able to put a default border around every node , but now want to put border on specific nodes only when they are hovered over. I read the earlier posts on this thread for the same. Where can I access the the drawBorder property of the nodes . Please give example. Is it something we write in the data.json file.


PS: I am new to Sigma JS.


computermacgyver commented Oct 29, 2014

@mangeshkaslikar Did you export your graph with the plugin for gephi? If so, you are using an earlier of sigma.js and most of this thread applies to you, but it would be better to ask for support at https://github.com/oxfordinternetinstitute/InteractiveVis/issues .

If you didn't use the plugin or have no idea what I'm talking about, then this is the right repository to ask at, but most of this thread is obselete because a new version of sigma.js was released. In that case you'll want to look at the example jacomyal links to in his last comment.

@computermacgyver , I used the sigma JS Plugin from gephi. I got the node around every border , but dont know where to mention the drawBorder property .I wrote the drawBorder Property for one node in the data.json file and set it to false , but nothing happened. Where am I going wrong ?

Thank you for the link .


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment