i trying use nvds.js html indented tree nothing rendering on web page. below code using. please identify if there mistake in code or else.
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="novus-nvd3-05cfaaf/build/nv.d3.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script> <script src="novus-nvd3-05cfaaf/build/nv.d3.js"></script> <style> #chart { width: 500px; margin-left: 20px; } </style> </head> <body> <div id="chart"> </div> <script> var chart; nv.addgraph(function() { chart = nv.models.indentedtree() .tableclass('table table-striped') .columns([ { 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' } ]); var testdata = testdata(); d3.select('#chart').datum(testdata).call(chart); return chart; }); function testdata() { return [{ 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 , 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 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" } ] } ] }]; } </script> </body> </html>
nvd3.js doesn't support indented tree anymore (checked in nv.d3.js).
Comments
Post a Comment