如何使用HTML CSS繪制族樹的線條？

Question

我正在嘗試實現與http://www.ancestry.com類似的東西，但我不確定如何繪制線條。

這是我想要做的粗略的ascii草圖：

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

我認為這樣做的一種方法是創建一個單元格表格，並創建線條圖像，將每個孩子與父母聯系起來。 我猜這是一種更簡單的方法，但我對CSS的了解非常有限。 有沒有人建議如何實現這個？

Answer 1

你可以用純css做到這一點。 這是一個例子：

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

Answer 2

我還會再提一個答案，雖然上面的答案都在爭議中。

假設您想要在所有瀏覽器上工作。 如果您需要使用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 3

圖形界面的另一個選項是canvas元素。 你可以在它身上找到一些信息在這里 ， 在這里 ，和什么可以做一些演示這里 。

就個人而言，我會選擇帶有圖像地圖疊加或可能是Flash的Canvas。 僅使用div或表創建圖形布局可能會非常快速地失控，並創建龐大而丑陋的代碼。 雖然這是一個意見問題。 :)

您可以使用畫布來渲染線條，然后使用文本為每個節點絕對定位div。 或者您可以在畫布中渲染整個事物（如果您希望渲染樹是交互式的，那么您需要一個圖像映射覆蓋。）

Answer 4

谷歌有一個控制權

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

Answer 5

我喜歡SlickMap CSS 。

因為它是為站點地圖制作的，所以它設置了嵌套的鏈接列表，但是修改它以處理每個單元格中的鏈接比較簡單，就像我在這里做的那樣： http ： //dl.dropbox.com/u/546793/demo/SlickmapCSS_rich /index.html

Answer 6

一種選擇是使用絕對定位和一些圖像。 您將需要水平線和垂直線圖像。 然后使用定位來定位具有相應線條的項目。

Answer 7

到目前為止我看過的例子都使用flash來做類似的事情。 例如http://academia.edu 。

否則，我可能會使用絕對定位的DIV來組成線 - 這需要一些復雜的計算，但:)

第三種選擇 - 如果你願意使用更多的javascript並犧牲一些瀏覽器的兼容性就是使用SVG元素。 你可以查看這個庫： http ： //raphaeljs.com/那里有一個很好的樹狀演示，你可能會覺得很有用（ http://raphaeljs.com/graffle.html ）。

Answer 8

我想用CANVAS。

看看..可能它給了一些想法繪制圖形與畫布

Answer 9

你可以使用jsPlumb，它非常適合那種東西http://jsplumbtoolkit.com/demo/chart/mootools.html