<!DOCTYPE html> <meta charset="utf-8"> <link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> <style> body { overflow-y:scroll; } </style> <body> <div id="example1" style="width:600px"></div> <script src="../lib/d3.v3.js"></script> <script src="../nv.d3.js"></script> <script src="../src/utils.js"></script> <script src="../src/models/indentedTree.js"></script> <script> // THIS API WILL BE CHANGING!! this was ported from a different graphing collection, its only been halfway ported to the nvd3 style var testTree = [{ key: 'NVD3', url: 'http://novus.github.com/nvd3', values: [ { key: "Charts", _values: [ { key: "Simple Line", type: "Historical", url: "http://novus.github.com/nvd3/ghpages/line.html" }, { key: "Scatter / Bubble", type: "Snapshot", url: "http://novus.github.com/nvd3/ghpages/scatter.html" }, { key: "Stacked / Stream / Expanded Area", type: "Historical", url: "http://novus.github.com/nvd3/ghpages/stackedArea.html" }, { key: "Discrete Bar", type: "Snapshot", url: "http://novus.github.com/nvd3/ghpages/discreteBar.html" }, { key: "Grouped / Stacked Multi-Bar", type: "Snapshot / Historical", url: "http://novus.github.com/nvd3/ghpages/multiBar.html" }, { key: "Horizontal Grouped Bar", type: "Snapshot", url: "http://novus.github.com/nvd3/ghpages/multiBarHorizontal.html" }, { key: "Line and Bar Combo", type: "Historical", url: "http://novus.github.com/nvd3/ghpages/linePlusBar.html" }, { key: "Cumulative Line", type: "Historical", url: "http://novus.github.com/nvd3/ghpages/cumulativeLine.html" }, { key: "Line with View Finder", type: "Historical", url: "http://novus.github.com/nvd3/ghpages/lineWithFocus.html" } ] }, { key: "Chart Components", _values: [ { key: "Legend", type: "Universal", url: "http://novus.github.com/nvd3/examples/legend.html" } ] } ] }]; var testColumns = [ { key: 'key', label: 'Name', showCount: true, width: '75%', type: 'text', classes: function(d) { return d.url ? 'clickable name' : 'name' }, click: function(d) { if (d.url) window.location.href = d.url; } }, { key: 'type', label: 'Type', width: '25%', type: 'text' } ]; nv.addGraph(function() { var chart = nv.models.indentedTree() .columns(testColumns); d3.select('#example1') .datum(testTree) .call(chart); }); </script>