NVD3.js 缩进树问题

Question

我正在尝试将 NVDS.js 用于 HTML 缩进树，但网页上没有呈现任何内容。下面是我正在使用的代码。请帮助确定代码中是否有任何错误或其他问题。

<!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 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"
           }
         ]
       }
     ]
   }];
 }
</script>
</body>
</html>

Answer 1

NvD3.js 不再支持缩进树（已在 nv.d3.js 中检查）。

NVD3.js 缩进树问题

NVD3.js Indented Tree issue

javascript

html

nvd3.js