Sha256: 62fd177ba5afcb307e26a064f314f2e4d5c466c4d6bf19a20d5b27c3b02edac0

Contents?: true

Size: 1.96 KB

Versions: 3

Compression:

Stored size: 1.96 KB

Contents

<html>
  <head>
    <title>Indented Tree</title>
    <script type="text/javascript" src="protovis-d3.2.js"></script>
    <script type="text/javascript" src="treevisitor.js"></script>

  <style type="text/css">
      body {
        margin: 0;
        display: table;
        height: 100%;
        width: 100%;
        font: 14px/134% Helvetica Neue, sans-serif;
      }

      #center {
        display: table-cell;
        vertical-align: middle;
      }

      #fig {
        position: relative;
        margin: auto;
      }

  </style>
  </head>
  <body>


    <script type="text/javascript+protovis">

for (first in treevisitor) break;

var root = pv.dom(treevisitor)
    .root(first)
    .sort(function(a, b) pv.naturalOrder(a.nodeName, b.nodeName));

/* Recursively compute the package sizes. */
root.visitAfter(function(n) {
  if (n.firstChild) {
    n.nodeValue = pv.sum(n.childNodes, function(n) n.nodeValue);
  }
});

var vis = new pv.Panel()
    .width(400)
    .height(function() (root.nodes().length + 1) * 12)
    .margin(5);

var layout = vis.add(pv.Layout.Indent)
    .nodes(function() root.nodes())
    .depth(25)
    .breadth(12);

layout.link.add(pv.Line);

var node = layout.node.add(pv.Panel)
    .top(function(n) n.y - 6)
    .height(12)
    .right(6)
    .strokeStyle(null)
    .events("all")
    .event("mousedown", toggle);

node.anchor("left").add(pv.Dot)
    .strokeStyle("#1f77b4")
    .fillStyle(function(n) n.toggled ? "#1f77b4" : n.firstChild ? "#aec7e8" : "#ff7f0e")
    .title(function t(d) d.parentNode ? (t(d.parentNode) + "." + d.nodeName) : d.nodeName)
  .anchor("right").add(pv.Label)
    .text(function(n) n.nodeName);

node.anchor("right").add(pv.Label)
    .textStyle(function(n) n.firstChild || n.toggled ? "#aaa" : "#000")
    .text(function(n) (n.nodeValue >> 10) + "KB");

vis.render();

/* Toggles the selected node, then updates the layout. */
function toggle(n) {
  n.toggle(pv.event.altKey);
  return layout.reset().root;
}

    </script>
  </body>
</html>

Version data entries

3 entries across 3 versions & 1 rubygems

Version Path
treevisitor-0.2.1 examples/protovis/index.html
treevisitor-0.2.0 examples/protovis/index.html
treevisitor-0.1.6 examples/protovis/index.html