Showing dotted link

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 link Type 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  help to understand and resolve the issue.

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);