15

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

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

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

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

4

9 に答える 9

26

純粋なcssでそれを行うことができます。例を次に示します。

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

于 2012-04-23T10:19:17.287 に答える
10

上記の答えはすべて大枠にありますが、もう1つ答えを入れます。

すべてのブラウザで作業したいと仮定しましょう。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: []},          
    ]}
  ]
};

他にも解決策があると思います。あなたに合った解決策が見つかることを願っています。

于 2009-11-08T04:26:22.343 に答える
7

グラフィカル インターフェイスのもう 1 つのオプションは、canvas 要素です。ここ、ここ、およびここで何ができるかのいくつかのデモを見つけることができます。

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

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

于 2009-11-08T02:49:06.750 に答える
7

Googleにはこれを制御する機能があります

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

于 2009-11-08T03:03:28.110 に答える
4

これにはSlickMap CSSが気に入っています。

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

于 2011-04-27T09:06:35.050 に答える
2

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

于 2009-11-08T02:15:15.353 に答える
1

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

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

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

于 2009-11-08T02:22:05.587 に答える
1

CANVASを使用していると思います。

見てください.. キャンバスでグラフィックを描画するアイデアが得られるかもしれません

于 2009-11-08T03:21:55.123 に答える
0

jsPlumb を使用できます。これは、そのようなものにはかなり適していますhttp://jsplumbtoolkit.com/demo/chart/mootools.html

于 2014-04-03T01:55:51.973 に答える