d3 동적 배치의 동적 곡선

Question

cytoscape example과 같은 힘 레이아웃의 선에 대한 동적 베 지어 곡선을 갖고 싶습니다. d3에서 가능합니까? 이 d3 example을 참조하십시오. 그러나 호를 사용하십시오. 알고리즘에 대해 잘 모릅니다. 누군가 아이디어를 가지고 있습니까?

Answer 1

나는이 algorytm와 cytoscape 라이브러리와는

function tick() { 
    path.attr("d", function (d) { 
      var coordinatesP = findEdgeControlPoints(d); 
      return "M" + d.source.x + "," + d.source.y + "S" + coordinatesP.xp + "," + coordinatesP.yp + " " + d.target.x + "," + d.target.y; 
    }); 
    hashTable = {}; 
      nodes.attr("cx", function (d) { return d.x; }) 
       .attr("cy", function (d) { return d.y; }); 
} 

var findEdgeControlPoints = function (d) { 
     var midPointX = (d.source.x + d.target.x)/2; 
     var midPointY = (d.source.y + d.target.y)/2; 

     var displacementX, displacementY; 

     displacementX = d.target.y - d.source.y; 
     displacementY = d.source.x - d.target.x; 

     var displacementLength = Math.sqrt(displacementX * displacementX + displacementY * displacementY); 

     displacementX /= displacementLength; 
     displacementY /= displacementLength; 

     var distanceFromMidpoint = findPathDeltaControlPoint(d); 


     var xp = midPointX + displacementX * distanceFromMidpoint; 
     var yp = midPointY + displacementY * distanceFromMidpoint; 

     return {xp : xp, yp : yp}; 

    }; 
    var findPathDeltaControlPoint = function (edge) { 
     /*caso statico il primo al centro e tutti gli altri ai lati*/ 
     /*conto le occorrenze */ 
     var pairId, 
      delta, 
      TICK = 20; 
     pairId = edge.source.id > edge.target.id ? 
       edge.target.id + '-' + edge.source.id : 
       edge.source.id + '-' + edge.target.id; 

     if (hashTable[pairId] == undefined) { 
      hashTable[pairId] = []; 
     } 
     if (edge[pairId] == undefined) { 
      edge[pairId] = []; 
     } 
     if (edge[pairId].length == 0) { 
      edge[pairId].push(pairId); 
     } 
     hashTable[pairId].push(edge); 
     // Ceck if is the first occurence 
     var pairIdOccurence = hashTable[pairId].length; 
     if (pairIdOccurence == 1) { 
      delta = 0; 
     } else if (pairIdOccurence > 1) { 
      // Check if is equal 
      if (pairIdOccurence % 2 == 0) { 
       delta = (TICK * pairIdOccurence)/2; 
      } else { 
       delta = -((TICK * (pairIdOccurence - 1))/2); 
      } 
     } 
     return delta; 
    };