Forced Directed Graph Multiple Edges Using D3 Canvas

I have created forced directed graph which has multiple edges , but after rending it shows only , other one overlaps on one another . I want to create something like https://bl.ock

Solution 1:

You can make the curve like this:

  //make a curve object 
  var curves = {};

  function getCurveFactor(d){
    var factor = 0.3;//you may change this as per your choice.
    //make a key
    var key = d.source.index + "---"+ d.target.index;
    //see if the key is present in the object
    if (curves[key]){
      //if key is present you need a bigger curve
     //so that it does not overlap
      curves[key] = curves[key] + factor;
    } else {
      //no key present keep the curve simple
      curves[key] = 1;
    }
    return curves[key];
  }

This function makes the arc:

    function arcPath(d) {
                var x1 = d.target.x,
                    y1 = d.target.y,
                    x2 = d.source.x,
                    y2 = d.source.y,
                    dx = x2 - x1,
                    dy = y2 - y1,
                    dr = Math.sqrt(dx * dx + dy * dy),
                    drx = dr,
                    dry = dr;
                 //store the curve factor inside the data.
                if(!d.curve){
                  d.curve = getCurveFactor(d);
                }    
                return "M" + x1 + "," + y1 + "A" + (drx/d.curve) + ", " + (dry) + " " + 0 + ", " + 0 + ", " + 0 + " " + x2 + "," + y2;
            }

working code here