い線を引くファミリーでの木のHTMLを利用したCSS?

https://stackoverflow.com/questions/1695115

18-09-2019
|

質問

ようにしている実施のようなものか http://www.ancestry.com がんがの描き方を行います。

こちらは荒れたasciiを描きたいと思い:

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

思うにこれはテーブルを作成する細胞を作ったりのライン、接続それぞれの子どもがいます。私の推測が容易に行うことが、私の知識のCSSですが非常に限定されている。いて提案まで実施可能です。

解決

別のオプションのためのグラフィカルインターフェイスのcanvas要素です。きの情報でこちらの, こちらの, 一部のデモ実現できることこちらの.

個人的に、選択キャンバスの画像地図のオーバーレイ可能性もある。作成グラフィカルなレイアウトのみを使用しdivsまたはテーブルが得手は非常に迅速に作成と醜います。このような問題の意見を出しました。:)

を使用できるキャンバスに描画のためのライン、そして絶対位置divsテキストの各ノードです。またレイキャンバス(その時点でできれば画像地図のオーバーレイしたい場合は、描画されるツリーはインタラクティブでした。)

他のヒント

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

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

上記の答えは、すべての球場であるが、

私は、中にもう一つの答えをスローされます。

あなたはすべてのブラウザで仕事をしたいと仮定しましょう。あなたは、Internet Explorer上で動作し、あなたがあなた自身のキャンバスソリューションをコーディングする必要がある場合は、 ExplorerCanvas を含めることができますます。

家族の木は、本質的にバイナリツリーです - 私が知っている、現実の生活がugh、離婚養子縁組とトリッキーですが、ちょうど彼らが特定の人からの一方向（先祖）にバイナリつもりだという第二のために仮定しましょう<。 / P>

キャンバスを使用しています良いツールは、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: []},          
    ]}
  ]
};

私は他のソリューションがそこにあると確信している、と私はあなたがあなたのために働くものを見つける願っています。

Googleは、このための制御を持っている。

http://code.google.com/apis/visualization/ドキュメント/ギャラリー/ orgchart.htmlする

私はこのために SlickMap CSS のが好きです。

それはサイトマップのために作られているので、

、それのスタイルは、リンクのリストを入れ子になったが、それは私がここで行ったように、各セル内のリンクより多くを処理するために、それを修正するために些細です：<のhref = "http://dl.dropbox.com /u/546793/demo/SlickmapCSS_rich/index.html」のrel = "nofollowを"> http://dl.dropbox.com/u/546793/demo/SlickmapCSS_rich/index.html の

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

私は今のところそのようなもののためにフラッシュを使用して見てきた例。 http://academia.edu を例えば

そうでなければ、私はおそらくラインアップするために絶対位置のDIVを使用します - しかし、いくつかの複雑な計算が必要になります。）

第三の選択肢 - あなたはより多くのJavaScriptを使用して、いくつかのブラウザの互換性は、SVG要素を使用することです犠牲にして喜んでいる場合。あなたはこのライブラリをチェックアウトすることができます： http://raphaeljs.com/するあなたは（ http://raphaeljs.com/graffle役立つことがあるでの素敵なツリー状のデモがあります。 HTML に）。

私はCANVASを使用して推測します。

それはいくつかのアイデアを提供します。..かもしれ見てくださいキャンバスを持つグラフィックス描画

あなたはもののようなもののためにかなり良いですjsPlumbを、使用することができますます。http：// jsplumbtoolkit。 COM /デモ/チャート/ mootools.htmlする

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow