can we add hexagon as shape for node in network

[rg2609]

I am using the Network layout and I wanted to show node in hexagon shape, how can I do this, can we use SVG script in vis js

[wimrijnders]

The right way to do this, would be to add the hexagon as a drawable shape to Network. This is not too hard, other shapes can be used as a template.

An alternative would be to draw the shape yourself in the afterDrawing event. This is essentially the same as previous comment, but the drawing code would be in user code and you don't get the benefit of internal functionality for resizing, labels etc.

SVG is supported, but drawing SVG's on a canvas element has severe limitations. See example HTML in Nodes.

[rg2609]

I have added following in code snippet in the lib/network/shapes.js

/**
   * Draw a Hexagon shape with 6 sides
   * @param {Number} x horizontal center
   * @param {Number} y vertical center
   * @param {Number} r   radius
   */
  CanvasRenderingContext2D.prototype.hexagon = function (x, y, r) {
    // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
    this.beginPath();
    var a = (Math.PI*2)/6;
    this.translate(x,y);
    this.moveTo(radius,0);
    for (var i = 1; i < sides; i++) {
      this.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
    }
      this.closePath();
  };

should I need to also update the vis.js file

[wimrijnders]

Hugely appreciated that you took it upon yourself to pick this up.

However, there's just a bit more work to do. The next step is to add a class in lib/network/module/components/nodes/shapes. You can use Square again as a template.

I'll get back to you on the first available opportunity.

[rg2609]

I added the class Hexagon in lib/network/module/components/nodes/shapes

[wimrijnders]

You are fast, my friend.

Two more steps to go with the source code, if you're up to it:

• lib/network/modules/components/Node.js: add the require and the initialization of the new shape. Again, scan for Square.
• lib/network/options.js - add 'hexagon' to the options - scan for 'square', two places.

After that, the code is done. To build:

• gulp lint - to scan for errors
• gulp - to build
• npm test - to run all unit tests

And now is a good moment to test if it still works and your new shape works:

• run a node example, e.g. examples/nodes/basicUsage.html
• change one of the node shapes to hexagon, e.g.:

    {id: 1, label: 'Node 1', shape:'hexagon'},

...and refresh.

If it all works, congrats, you are an open source developer!
.....well you're not done yet; you still have to submit a PR. If you haven't done that before, I'll guide you through it.

---

Edit: And also, the documentation will need updating. I know, a lot of work in total. And this is a simple change.

[rg2609]

I did all the changes, but it's not working still shows an ellipse shape

[wimrijnders]

OK, great that you went so far. I'll need a bit more than that to go on.

What errors are you getting?

Do you have the code changes available, so I can look into it? It would be ideal if you had a fork on github.

[rg2609]

Sorry for the delay, here is my code https://github.com/rg2609/vis

[wimrijnders]

OK. It looks like you made your changes in the master-branch. You need to make them in the develop-branch. You'll probably also need to do some preliminary installation. Check out the chapter Build in the README.md.

I sincerely hope you continue on this path!

[rg2609]

$ gulp lint
module.js:328
    throw err;
    ^

Error: Cannot find module 'gulp-concat'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/rgupta/github/vis/gulpfile.js:5:14)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)

gulp lint throws an error

[wimrijnders]

OK. Yes, that would be missing in the master-branch. Please move your code changes to the develop-branch. First thing you do there, is run npm install. After that, you can continue with the steps I mentioned above.

[rg2609]

I moved to the develop branch and also run npm install, but still, its giving an error