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缩进树问题

1 个答案: