HTML CSS를 사용하여 패밀리 트리의 선을 그리려면 어떻게해야합니까?

Question

http://www.ancestry.com과 비슷한 것을 구현하려고하지만 선을 그리는 방법을 모르겠습니다.

    +----GrDAD1 
       | 
    +----DAD----+ 
    |   +----GrMOM1 
ME --+ 
    |   +----GrDAD2 
    +----MOM----+ 
       | 
       +----GrMOM2 

나는이 작업을 수행하는 한 가지 방법은 세포의 테이블을 생성하고, 라인의 이미지를 만드는 것입니다 생각, 는 각 연결 : 여기에

내가 뭘 원하는지의 거친 아스키 스케치입니다 아이들을 부모에게. 나는 이것을 할 수있는 더 쉬운 방법이 있다고 생각하지만, CSS 지식은 아주 제한적이다. 누구나 구현할 수있는 방법에 대한 제안이 있습니까?

Answer 1

그래픽 인터페이스의 또 다른 옵션은 canvas 요소입니다. 그것에 관한 정보는 here, here, 그리고 할 수있는 일에 대한 데모를 찾을 수 있습니다 here.

필자는 개인적으로 이미지 맵 오버레이 또는 Flash로 Canvas를 선택했습니다. div 나 테이블 만 사용하여 그래픽 레이아웃을 만들면 매우 빨리 손을 뗄 수 있으며 엄청나게 추악한 코드를 만들 수 있습니다. 그것은 의견의 문제입니다. :)

캔버스를 사용하여 선을 렌더링 한 다음 각 노드의 텍스트가있는 div를 절대적으로 배치 할 수 있습니다. 또는 당신이 (당신이 렌더링 트리 대화 형 수 있도록하려면 어떤 시점에서 당신은 이미지 맵 오버레이가 필요합니다.) 캔버스 전체를 렌더링 할 수

Answer 2

하나의 옵션은 절대 위치 지정과 몇 개의 이미지를 사용하는 것입니다. 수평선과 수직선 이미지가 필요합니다. 그런 다음 위치 지정을 사용하여 항목을 해당 줄로 배치하십시오.

Answer 3

예전에 본 적이있는 예제는 그런 것들을 위해 플래시를 사용합니다. 예 : http://academia.edu. :)

세 번째 옵션이지만, 몇 가지 복잡한 계산을 필요로 - -

그렇지 않으면, 아마 절대적으로 라인을 만들 수있는 div 위치에 사용하는 것이 더 많은 자바 스크립트를 사용하여 어떤 브라우저 호환성을 희생하고자하는 경우 SVG 요소를 사용하는 것입니다. 이 라이브러리를 체크 아웃 할 수 있습니다 : http://raphaeljs.com/ 유용한 트리 찾을 수있는 좋은 나무 같은 데모가 있습니다 (http://raphaeljs.com/graffle.html).

Answer 4

구글이

http://code.google.com/apis/visualization/documentation/gallery/orgchart.html

Answer 5

의 컨트롤을 가지고 CANVAS를 사용하는 것 같습니다.

은 보라 .. 그것은 몇 가지 아이디어 Drawing Graphics with Canvas

Answer 6

내가 하나 더 대답을 던질거야를 제공 할 수있다, 답변 위의 야구장에있는 모든 있지만.

모든 브라우저에서 작업한다고 가정 해 보겠습니다. Internet Explorer에서 작업해야하고 자신의 Canvas 솔루션을 코딩하는 경우 ExplorerCanvas을 포함 할 수 있습니다.

가계도는 본질적으로 이진수입니다. 실제 생활은 입양, 이혼, 힘들지만 까다 롭지 만 특정인의 한 방향 (조상)으로가는 바이너리라고 가정 해 봅시다.

Canvas를 사용하는 훌륭한 도구는 IE에서 작동하도록 다리가 있으며 JavaScript InfoVis Toolkit은 간단하고 일반적인 데이터 형식을 사용합니다.

체크 아웃시에 샘플을 : http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html

그것은 정확하게 당신이 밖으로 상자의 원하는 것을하지 않을 수 있습니다,하지만 당신은 모양을 꼬집고 느낄 수 있습니다.

데이터 페이로드는 매우 간단에서이 플러그인하고, 당신의 예는 다음과 같이 보일 것이다 :

var tree = { 
    id: "ME", // Needs to be internally unique 
    name: "ME", // Visual label, does not need to match id 
    data: {}, // not really used here, but parameter needed 
    children: [ 
    {id: "DAD", 
    name: "DAD", 
    data: {}, 
    children: [ 
     {id: "GrDAD1", 
     name: "GrDAD1", 
     data: {}, 
     children: []}, 
     {id: "GrMOM1", 
     name: "GrMOM1", 
     data: {}, 
     children: []},   
    ]}, 
    {id: "MOM", 
    name: "MOM", 
    data: {}, 
    children: [ 
     {id: "GrDAD2", 
     name: "GrDAD2", 
     data: {}, 
     children: []}, 
     {id: "GrMOM2", 
     name: "GrMOM2", 
     data: {}, 
     children: []},   
    ]} 
    ] 
}; 

내가 거기 밖으로 다른 솔루션이 확신을, 나는 당신이 작동 하나를 찾을 희망 너를 위해서.

Answer 7

나는 이것을 위해 SlickMap CSS을 좋아합니다.

는이 맵을 위해 만들어졌다 때문에, 스타일 링크의 목록을 중첩,하지만 내가 여기했던 것처럼, 각 셀의 링크보다 더 처리하기 위해 수정하는 사소한 : http://dl.dropbox.com/u/546793/demo/SlickmapCSS_rich/index.html는

Answer 8

당신은 순수 CSS로 그것을 할 수 있습니다. 다음은 그 예이다 :

http://thecodeplayer.com/walkthrough/css3-family-tree

Answer 9

당신이 아무것도를 설치하려면 브라우저 최종 사용자가 필요합니까