HTML CSS를 사용하여 가계도의 선을 어떻게 그리나요?

StackOverflow https://stackoverflow.com/questions/1695115

문제

나는 무엇과 비슷한 것을 구현하려고 노력하고 있습니다 http://www.ancestry.com 그러나 나는 선을 그리는 방법을 잘 모르겠습니다.

다음은 내가하고 싶은 일에 대한 거친 ASCII 스케치입니다.

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

이를 수행하는 한 가지 방법은 세포 테이블을 만들고 각 자녀를 부모와 연결하여 선의 이미지를 만드는 것입니다. 그래도 더 쉬운 방법이 있다고 생각하지만 CSS에 대한 나의 지식은 상당히 제한적입니다. 누구든지 내가 이것을 구현할 수있는 방법에 대한 제안이 있습니까?

도움이 되었습니까?

해결책

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

개인적으로, 나는 이미지 맵 오버레이 또는 플래시가있는 캔버스를 선택합니다. div 또는 테이블 만 사용하여 그래픽 레이아웃을 생성하면 매우 빠르게 손을 떼고 거대하고 못생긴 코드를 만들 수 있습니다. 그것은 의견의 문제이지만. :)

캔버스를 사용하여 선을 렌더링 한 다음 각 노드에 대한 텍스트로 div를 절대 배치 할 수 있습니다. 또는 캔버스에서 모든 것을 렌더링 할 수 있습니다 (이 시점에서 렌더링 된 트리를 대화식으로 원할 경우 이미지 맵 오버레이가 필요합니다.)

다른 팁

순수한 CSS로 할 수 있습니다. 예는 다음과 같습니다.

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

위의 답변은 모두 야구장에 있지만 한 번 더 답변하겠습니다.

모든 브라우저에서 작업하고 싶다고 가정 해 봅시다. Internet Explorer에서 작업해야하고 자신의 캔버스 솔루션을 코딩하는 경우 ExplorerCanvas.

가계도는 본질적으로 이진 나무입니다. 나는 실생활이 입양, 이혼, 어, 어, 특정한 사람으로부터 한 방향 (조상)으로가는 바이너리를 1 초 동안 가정 해 봅시다.

캔버스를 사용하고 IE 포함에 대한 브리지가있는 좋은 도구는 간단하고 일반적인 데이터 형식을 사용하는 JavaScript Infovis 툴킷입니다.

샘플을 확인하십시오.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: []},          
    ]}
  ]
};

나는 거기에 다른 솔루션이 있다고 확신하며, 당신이 당신에게 맞는 솔루션을 찾기를 바랍니다.

좋아요 슬라이크 맵 CS 이것을 위해.

Sitemaps 용으로 만들어 졌으므로 중첩 된 링크 목록은 스타일이지만 여기에서했던 것처럼 각 셀의 링크보다 더 많은 것을 처리하도록 수정하는 것은 사소한 일입니다. http://dl.dropbox.com/u/546793/demo/slickmapcss_rich/index.html

한 가지 옵션은 절대 포지셔닝과 몇 가지 이미지를 사용하는 것입니다. 수평선과 수직선 이미지가 필요합니다. 그런 다음 포지셔닝을 사용하여 해당 라인과 항목을 배치하십시오.

내가 본 예제는 지금까지 그런 것들을 위해 플래시를 사용합니다. http://academia.edu 예를 들어.

그렇지 않으면, 나는 아마도 절대적으로 배치 된 div를 사용하여 선을 구성 할 것입니다. 그러나 몇 가지 복잡한 계산이 필요합니다. :)

세 번째 옵션 - 더 많은 JavaScript를 사용하고 희생하려는 경우 일부 브라우저 호환성은 SVG 요소를 사용하는 것입니다. 이 라이브러리를 확인할 수 있습니다. http://raphaeljs.com/ 유용 할 수있는 멋진 나무 같은 데모가 있습니다 (http://raphaeljs.com/graffle.html).

캔버스를 사용하는 것 같아요.

보세요 .. 아이디어를 줄 수 있습니다.캔버스로 그래픽 그리기

JSPLUMB를 사용할 수 있습니다. http://jsplumbtoolkit.com/demo/chart/mootools.html

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top