트리 다이어그램의 링크 방향 방향이 잘못되었습니다.

Question

트리 다이어그램 예제 here부터 시작하여 각 링크의 소스 및 대상 위치가 공통된 회의 지점을 기준으로 변경 될 수 있도록 링크를 변경하려고합니다. 현재 진행 상황은 here입니다 (이 예제는 문제를 설명하기 위해 고안된 것이지만 적절하게 수행 한 것 같습니다).

이 기능은 source 및 target 평가사 기능을 사용하여 가능합니다. 따라서 diagonal 변수의 원본 코드를 편집했습니다.

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.y, d.x]; }); 

to;

위치에 문제가 없지만 링크는 여전히 수직적이며 결과적으로 이렇게 보입니다. 이보다는

;

I은 ​​수직 트리 링크 배향 성공 대각 변수 선언에 X/Y 값의 방향을 변경하려고했다.

나는 링크를 입력 할 때 코드의 약간 더 복잡한 코드에서 잘못된 방향으로 나타나는 링크를 다시 시도해 보았습니다.

커브의 방향을 설명하기 위해 추가 평가자를 포함해야한다고 생각할 수는 없지만 볼 수만 있다면 나는 실망합니다.

시작 코드 here.

적응 코드 here.

많은 관심을 가져 주셔서 감사합니다.

Answer 1

여기에 뭔가가 완전히 누락되었을 수 있습니다. 그러나하지만 교체 :

.projection(function(d) { return [d.y, d.x]; }); 

로 :

.source(function(d) { return {x: d.source.y , y: d.source.x}; }) 
.target(function(d) { return {x: d.target.y , y: d.target.x}; }); 

거의 라인이 보간 방법을 제외하고, .projection의 기능을 복제합니다. 만약 투영 설정하면 대신 원래이고 X를 정의 및 y는 전체 도면은 수평으로, 수직 배향으로부터 뒤집혀 통상 소스 및 대상 좌표 같이

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.y, d.x]; }) 
    .source(function(d) { return {x: d.source.x , y: d.source.y}; }) 
    .target(function(d) { return {x: d.target.x , y: d.target.y}; }) 

는주기 :

목표로 삼는 올바른 정렬을 유지하면서 소스 및 목표 평가자에게 계속 액세스 할 수 있습니다.

D3 사이트를 아주 좋아합니다. 훌륭한 자료입니다.