I'm using the vis.js library to draw a network but I need to customize the way the edges are drawn. For example, I would like to draw let's say 50% of the edge in red and the other 50% in blue.

Is there a way to do this?

I'm using the vis.js library to draw a network but I need to customize the way the edges are drawn. For example, I would like to draw let's say 50% of the edge in red and the other 50% in blue.

Is there a way to do this?

• javascript
• vis.js-network
• vis.js

Share Improve this question Follow edited Feb 16, 2018 at 10:01 YakovL 8,4051313 gold badges7373 silver badges113113 bronze badges asked Mar 15, 2017 at 16:15 jroyjroy 57566 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Finally found a way to do it:

var nodes = new vis.DataSet
([
    {id: 1, label: '1'},
    {id: 2, label: '2'},
]);

var edges = new vis.DataSet
([
    {from: 1, to: 2, color:'red'},
]);

var graph = {nodes: nodes, edges: edges};
var network = new vis.Network(container, graph, options);
var percent = 50;
network.on("afterDrawing", function (ctx)
{
    var pos = network.getPositions([1, 2]);
    ctx.strokeStyle = ctx.filStyle = 'green';
    ctx.moveTo(pos[1].x, pos[1].y);
    ctx.lineTo(pos[1].x + (pos[2].x-pos[1].x)*percent/100, pos[1].y + (pos[2].y - pos[1].y)*percent/100);
    ctx.fill();
    ctx.stroke();
});

You cannot directly customize parts of an edge but you can create two different edges (each with its own style) using a dummy invisible node serving as a connector. Since the dummy node is invisible, the two edges are going to look like two parts of the same edge.

For example, say you want to connect two nodes with a half-green-half-red edge:

var nodes = new vis.DataSet([
    {id: 1, label: '1'},
    {id: 2, label: '2'},
    {id: 'dummy', hidden: true}
]);

var edges = new vis.DataSet([
    {from: 1, to: 'dummy', color:'red'},
    {from: 'dummy', to: 2, color:'green'}
]);

var graph = {nodes: nodes, edges: edges};