HTML 节点映射生成器？

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 标记内，但为了举例，我将使用我的投资组合页面中的 sn-p 和一些生成的文本）

变成this：

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

这绝对没有设计思想，所以不要批评它，纯粹是为了示例目的。我在 Photoshop 中快速制作了这张图片，只是为了准确说明我在说什么。在大多数情况下，所有这些都可以通过 CSS 轻松生成。无论如何，它不一定是这个图形，但为了让我感到无聊，它是。

---

我正在寻找可以为我完成此任务的插件或软件。我希望它会以 HTML 或图像的形式生成此地图。我想任何地图类型都可以，只要它易于遵循即可。

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

Answer 1

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

Answer 2

Graphviz 是做这种事情的好工具。

您可以使用一段 Javascript 生成 Graphviz 文件并使用该工具生成 png。

javascript 应该递归地访问所有元素并为每个元素生成唯一的 ID，并以相当容易理解的 Graphviz 格式将它们写出来。

这是一个将页面转换为 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我还没试过，但看起来很有希望。