HTML節點地圖生成器？

好吧，我正在尋找的東西可以生成一個網頁節點的圖形樹狀風格的地圖。HTML節點地圖生成器？

所以基本上它理論上可以改變這樣的事情：

<aside id="leftCol"> 
    <section class="container"> 
     <header class="child1"> 
      <hgroup> 
       <h1 class="title">Demo Project</h1> 
       <h3 class="subTitle">WEBSITE 2011</h3> 
      </hgroup> 
     </header> 

     <div class="child2" id="thisDiv"> 
      <div class="subChild1"> 
       <div class="anotherChild1"></div> 
       <div class="anotherChild2"></div> 
       <div class="anotherChild3"></div> 
      </div> 

      <div class="subChild2"> 
       <p>Some Text</p> 
      </div> 
     </div> 

     <footer class="child3">     
      <a href="#">Link to project here</a> 
     </footer> 
    </section> 
</aside>

（這當然是HTML和BODY標籤內，但對於一個例子，我將使用一個片段從着想我一些生成的文本組合頁）

成類似this：

Example http://www.deviantart.com/download/287437946/node_map_by_wild_fire126-d4r4sje.png

這裏絕對沒有設計思想，所以不要批評它，純粹是爲了這個例子的目的。我在photoshop中快速製作了這個圖片，只是爲了說明我正在談論的內容。所有這些都可以很容易地用CSS生成。它不一定是這種圖形，但爲了我感到無聊，它是。

我正在尋找一個插件或一個軟件，可以幫我這個忙。我更喜歡它會以HTML或圖像生成這張地圖。我想任何地圖類型都可以，只要易於理解即可。

作爲最後的手段，如果我找不到我正在尋找的東西，我可能最終只是自己寫，如果發生這種情況，我會很樂意尋找一些人來幫助編碼該插件。

來源

2012-02-27 Wild_Fire126

編輯：忘了提，這將很可能是一個單獨的頁面。最有可能是地址的輸入，然後它將獲取該地址的DOM並相應地構建地圖。 – 2012-02-27 08:37:02

我可以問......爲什麼？有很多開發工具，比如Firebug，可以幫助您更好地探索和可視化DOM樹。任何合理大小的頁面都會生成一個不太容易理解的巨大而複雜的圖形。另外，你有沒有看到Firefox中的3D「傾斜」功能？ http://blog.mozilla.com/tilt/ – 2012-02-27 12:23:01

您可以檢索某個元素的所有子元素並返回其標籤，類，ID和深度。然後你可以用CSS創造一個視覺樹。像這樣的東西應該工作。例如http://jsfiddle.net/elclanrs/UHbMa/。

jQuery插件：

$.fn.buildTree = function() { 
    var tree = {}; 
    this.find('*').andSelf().each(function(i, v) { 
     var parents = $(this).parents().length - 1; 
     for (var i = 0; i < parents; i++) { 
      tree[v.tagName.toLowerCase()] = { 
       id: v.id, 
       className: v.className, 
       depth: i 
      } 
     } 
    }); 
    return tree; 
};

然後你把它想：

var tree= $('aside').buildTree(), 
    html = ''; 
for (tag in tree) { 
    html += '<p><strong>Tag:</strong> ' + tag + 
      ' | <strong>Class:</strong> ' + tree[tag].className + 
      ' | <strong>Depth:</strong> ' + tree[tag].depth; 
} 
$('#tree').append(html);

來源

2012-02-27 08:02:50 elclanrs

這對純粹的閱讀來說很不錯，我認爲它可以很容易地擴展。但正如我所說，我一直在尋找更多圖形化的東西，以便輕鬆準備並遵循。 – 2012-02-27 08:26:21

Graphviz是做這種事情的一個很好的工具。

您可以使用一段Javascript來生成一個Graphviz文件並使用該工具生成一個png。

的JavaScript應該遞歸訪問所有元素，並生成唯一的ID爲每一個元素，並將它們寫出來的很容易理解的Graphviz格式。

下面是一個Bookmarklet，用於將頁面轉換爲Graphviz格式。

javascript:void((function() {var f = function(pid, e) { var id = "id" + Math.round(Math.random()*1000000), c = e.childNodes, r = id+'[label="'+(e.tagName ? e.tagName : e.nodeValue.replace(/[\n\r]+/g," "))+'"];\n'; for(var i = 0; i < c.length; i++) { r+=f(id, c[i]); }; if(pid) {r += pid + "->" + id + ";\n";}; return r;}; document.body.innerText = "digraph {\n" + f(false, document.getElementsByTagName("html")[0]) + "}"})())

這裏有一個快速workthrough的格式：http://www.orient-lodge.com/node/3408

然後生成一個PNG文件：（例如Unix下工作）

dot -Tpng <graph.dot> g.png

有一個JavaScript渲染Graphviz的，太。 Canviz我還沒有嘗試過，但看起來很有希望。

來源

2012-02-27 07:14:52 Gottox

有一個web服務生成圖聽起來好像比使用Javascript和創建HTML/CSS（對我來說）更好的想法，尤其是如果圖可以使用可保存（已知，標準）文本內容;前端生成文本內容，後端將實際圖形生成爲PNG格式。 – 2012-02-27 07:46:59

我通常也會這樣做，但我正在尋找一些能夠輕鬆滿足任何需求的樣式。所以它是完全自定義的，如果需要出現的話，我可以將其與任何我需要的東西結合使用。 – 2012-02-27 08:24:11

HTML節點地圖生成器？

回答

相關問題