Question

好吧，我正在寻找的东西可以生成网页节点的图形树式地图。

所以基本上它理论上可以改变这样的东西：

<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或图像生成这个地图。我猜任何地图类型都可以，只要它很容易理解。

作为最后的手段，如果我找不到我正在寻找的东西，我可能最终只是自己写，如果发生这种情况，我很乐意找一些人来帮助编写插件。

Answer 1

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]) + "}"})())

以下是格式的快速演练：http://www.orient-lodge.com/node/3408

然后生成一个png文件:(示例在Unix下运行）

dot -Tpng < graph.dot > g.png

Graphviz也有一个Javascript渲染器。 Canviz我还没有尝试过，但看起来很有希望。

Answer 2

您可以检索某个元素的所有子元素并返回其标记，类，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);

HTML节点映射生成器？

2 个答案: