D3 링크의 모양 변경

Question

데이터를 트리로 시각화하고 싶지만 기본 링크 모양을 사용자 정의하고 싶습니다. There 기본 모양이 표시되었지만 Rational Software Architect 링크와 같은 링크를 만들고 싶습니다. 가능한가?

Answer 1

나는 자체 경로 처리기를 작성하여이 작업을 수행했습니다.

function elbow(d) { 
     var radius = 10; 

     var xOffsetSign = Math.sign(d.source.x - d.target.x); 
     var yOffsetSign = Math.sign(d.source.y - d.target.y); 

     if (xOffsetSign != 0) { 
      var ellipseXDirection = (xOffsetSign * yOffsetSign) > 0 ? 1 : 0; 

      return "M" + d.source.x + "," + d.source.y 
       + " H" + (d.target.x + xOffsetSign * radius) 
       + " A" + radius + "," + radius + " 0 0," + ellipseXDirection + " " + d.target.x + "," + (d.source.y - yOffsetSign * radius) 
       + " V" + d.target.y 
       + (d.target.children ? "" : "h" + margin.right); 
     } else { 
      return "M" + d.source.x + "," + d.source.y 
       + " H" + d.target.x + " V" + d.target.y 
       + (d.target.children ? "" : "h" + margin.right); 
     } 
    } 

기능 Math.sign 내 자신의 구현

됩니다 다음은 샘플 코드입니다

Answer 2

링크는 SVG 경로 요소입니다. CSS을 사용하여 스타일을 지정하여 색상, 너비 등을 변경할 수 있습니다. 화살표 머리의 경우 SVG Markers을 사용할 수 있습니다. 레이블을 추가하려면 추가 SVG 텍스트 요소를 추가해야합니다. 예를 들어 UML 카디널리티의 SVG 텍스트 요소를 생성하는 데이터로 트리 links과 함께 새 선택을 추가 할 수 있습니다.