d3.js 가족 차트

Question

^이 출생/사망/이름 데이터를 적용하려면 차트를 향상 시작하는 목표입니다 -하지만 그것을 가지고 더 유연성을 가지고가. 또한 데이터 소스를 정리합니다.

은 내가 d3.js 가족 차트를 개발하기 위해 노력하고 있습니다. 이 차트의 데이터 구조를 향상시키고 라벨에 공간/디자인을 추가하는 방법에 관심이 있습니다. 부품에 동적 길이를 부여하여 필요한 공간을 확보하는 방법이 있다면 관심이 있습니다.

나는이 jsfiddle http://jsfiddle.net/857edt69/30/

// Create the node rectangles. 
    nodes.append("circle") 
    .attr("class", "node") 
    .attr("r", function(d, i) { 
     return smallRadius; 
    }) 
    .style("fill", function(d, i) { 

     var userName = d.userName; 
     if (userName) { 
     userName.toLowerCase() 
     } 

     var id = d.id + "-" + userName; //small circles 
     return "url(#" + id + ")"; 
    }) 
    .attr("id", function(d) { 
     return d.id; 
    }) 
    .attr("display", function(d) { 
     if (d.hidden) { 
     return "none" 
     } else { 
     return "" 
     }; 
    }) 
    .attr("cx", function(d) { 
     return d.x - (smallRadius/2) + 10; 
    }) 
    .attr("cy", function(d) { 
     return d.y - (smallRadius/2) + 10; 
    }); 


    // Create the node text label. 
    nodes.append("text") 
    .text(function(d) { 
     //return d.name; 
     return d.userName; 
    }) 
    .attr("x", function(d) { 
     return d.x - (smallRadius/2) + 10; 
    }) 
    .attr("y", function(d) { 
     return d.y - (smallRadius/2) - 20; 
    }); 

Answer 1

에게 "스기야마"계층 그래프 레이아웃으로 알려져 있습니다 하나는 족보의 유형에 사용하는 것이 정규 알고리즘을했습니다. (강제 레이아웃과 비슷한 것을 얻을 수도 있지만 제약 조건을 올바르게 설정하는 것은 매우 지루합니다)

스기야마는 너비와 오프셋을 측정하기 위해 트리를 가로 질러 트리를 다시 정렬하고 최소 라인을 배치해야합니다 크로스 오버. 그것은 가장 초보자 친화적 인 알고리즘 아니지만, 내가 찾은 가장 쉬운 도입은 개인적 스기야마 계산을위한 높은 광택 dagre lib에 좋은 성공 했어 here

이며, dagre-d3의 D3의 적응. (here's an example for cytoscape data structures)