Showing dotted link

[aaikepae]

Hi,

I want to display a dotted link between two nodes, depending on certain condition.

Below is the code snippet:

linkConfig: {

                width: function() {

                return 2;

                },

                linkType: 'curve',

                dotted: function(link, model){

                                if(link.get("vpc")){

                                                return true;

                                }

                                return false;

                }

}

However, it do not shows dotted link if linkType:”parallel”. It shows as normal link if we set linkType to parallel.

Also, for dotted link, with linkType:”curve”, the curve is not appearing to be proper. The curvature between two links is very low. So not able to differentiate dotted and normal link between two nodes(Multiple links between nodes).

Need your help to understand and resolve the issue.

Thanks and Regards,

Sachin Samel

[aaikepae]

We will remove 'dotted' property in the next release, instead of just using 'style' property. It is more flexible and can cover more cases.

Here is a sample code you can reference.

var topologyData = { nodes: [{ "id": 0, "x": 410, "y": 100, "name": "12K-1" }, { "id": 1, "x": 410, "y": 280, "name": "12K-2" }, { "id": 2, "x": 660, "y": 280, "name": "Of-9k-03" }, { "id": 3, "x": 660, "y": 100, "name": "Of-9k-02" }, { "id": 4, "x": 180, "y": 190, "name": "Of-9k-01" }], links: [{ "source": 0, "target": 1, "id": 0 }, { "source": 1, "target": 2, "id": 1 }, { "source": 1, "target": 3, "id": 2 }, { "source": 4, "target": 1, "id": 3 }, { "source": 2, "target": 3, "id": 4 }, { "source": 2, "target": 0, "id": 5 }, { "source": 2, "target": 0, "id": 6 }, { "source": 0, "target": 4, "id": 7 }, { "source": 0, "target": 3, "id": 8 }, { "source": 0, "target": 3, "id": 9 }, { "source": 0, "target": 3, "id": 10 }, { "source": 0, "target": 3, "id": 11 }] };
var topo = new nx.graphic.Topology({
               adaptive: true,
               nodeConfig: { label: 'model.id' },
               linkConfig: {
                    linkType: 'curve',
                    style: function(model) {
                         if (model.id() > 9) { 
                              return { 'stroke-dasharray': '2, 1' } 
                         } else { 
                              return { 'stroke-dasharray': '2 , 5' } 
                         } 
                    } 
               }, 
               showIcon: true, 
               data: topologyData 
       });  
var app = new nx.ui.Application();
topo.attach(app);