web-dev-qa-db-ja.com

HTML CSSを使用して家系図の線を引くにはどうすればよいですか？

http://www.ancestry.com に似たものを実装しようとしていますが、線の描き方がわかりません。

これが私がやりたいことの大まかなASCIIスケッチです：

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

これを行う1つの方法は、セルのテーブルを作成し、線の画像を作成して、各子を親に接続することだと思います。これを行うにはもっと簡単な方法があると思いますが、CSSに関する私の知識はかなり限られています。誰かが私がこれを実装する方法について提案がありますか？

javascripthtmlcssfamily-tree
15
Jin Kim

グラフィカルインターフェイスのもう1つのオプションは、canvas要素です。あなたはそれに関するいくつかの情報を見つけることができます ここ 、 ここ 、そしてそれができることのいくつかのデモ ここ 。

個人的には、イメージマップオーバーレイまたは場合によってはFlashを備えたCanvasを選択します。 divまたはテーブルのみを使用してグラフィカルレイアウトを作成すると、すぐに手に負えなくなり、巨大で醜いコードが作成される可能性があります。それは意見の問題ですが。 :)

キャンバスを使用して線をレンダリングし、各ノードのテキストでdivを絶対に配置できます。または、全体をキャンバスにレンダリングすることもできます（レンダリングされたツリーをインタラクティブにする場合は、その時点でイメージマップオーバーレイが必要になります）。

7
Mike Mytkowski

あなたは純粋なCSSでそれを行うことができます。ここに例があります：

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

26
Silver Moon

上記の答えはすべて球場にありますが、もう1つ答えを投げます。

すべてのブラウザで作業したいとします。 Internet Explorerで作業する必要があり、独自のCanvasソリューションをコーディングする場合は、 ExplorerCanvas を含めることをお勧めします。

家系図は本質的に二分木です-私が知っているように、実際の生活は養子縁組、離婚、うんざりするのが難しいですが、特定の人から一方向（祖先）に二分木が進んでいると少しだけ仮定しましょう。

Canvasを使用し、IEが含まれ、シンプルで一般的なデータ形式を使用するブリッジを備えた優れたツールは、JavaScript InfoVisToolkitです。

次のサンプルを確認してください： 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: []},          
    ]}
  ]
};

私はそこに他の解決策があると確信しています、そしてあなたがあなたのために働くものを見つけることを願っています。

10
jeremyosborne

グーグルはこれを制御します

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

7
smercer

私は SlickMap CSS が好きです。

サイトマップ用に作成されているため、リンクのネストされたリストのスタイルを設定しますが、ここで行ったように、各セルのリンク以上のものを処理するように変更するのは簡単です： http://dl.dropbox.com/u/546793 /demo/SlickmapCSS_rich/index.html

4
Henrik N

1つのオプションは、絶対配置といくつかの画像を使用することです。水平線と垂直線の画像が必要になります。次に、配置を使用して、対応する行でアイテムを配置します。

2
Vincent Ramdhanie

CANVASを使っていると思います。

見てください..それはいくつかのアイデアを与えるかもしれません キャンバスでグラフィックを描く

1
priyanka.sarkar

私がこれまで見てきた例では、そのようなものにフラッシュを使用しています。 http://academia.ed たとえば。

そうでなければ、私はおそらく絶対に配置されたDIVを使用して線を構成します-それはいくつかの複雑な計算を必要としますが:)

3番目のオプション-より多くのJavaScriptを使用してブラウザの互換性を犠牲にする場合は、SVG要素を使用することです。このライブラリをチェックアウトできます： http://raphaeljs.com/ そこには便利なツリーのような素敵なデモがあります（ http://raphaeljs.com/graffle .html ）。

1
disc0dancer

あなたはjsPlumbを使うことができます、それはその種のものにかなり良いです http://jsplumbtoolkit.com/demo/chart/mootools.html

0
Roman Jaquez