0
HTMLのインデントされたツリーにNVDS.jsを使用しようとしていますが、Webページに何も表示されません。以下は私が使用しているコードです。コードなどに間違いがあるかどうか確認してください。NVD3.jsインデントされたツリーの問題
<!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() {
\t chart = nv.models.indentedTree()
\t .tableClass('table table-striped')
\t .columns([
\t {
\t key: 'key',
\t label: 'Name',
\t showCount: true,
\t width: '75%',
\t type: 'text',
\t classes: function(d) { return d.url ? 'clickable name' : 'name' },
\t click: function(d) {
\t if (d.url) window.location.href = d.url;
\t }
\t },
\t {
\t key: 'type',
\t label: 'Type',
\t width: '25%',
\t type: 'text'
\t }
\t ]);
\t var testData = testData();
\t d3.select('#chart').datum(testData).call(chart);
\t
\t return chart;
\t });
\t function testData() {
\t return [{
\t key: 'NVD3',
\t url: 'http://novus.github.com/nvd3',
\t values: [
\t {
\t key: "Charts",
\t _values: [
\t {
\t key: "Simple Line",
\t type: "Historical",
\t url: "http://novus.github.com/nvd3/ghpages/line.html"
\t },
\t {
\t key: "Scatter/Bubble",
\t type: "Snapshot",
\t url: "http://novus.github.com/nvd3/ghpages/scatter.html"
\t },
\t {
\t key: "Stacked/Stream/Expanded Area",
\t type: "Historical",
\t url: "http://novus.github.com/nvd3/ghpages/stackedArea.html"
\t },
\t {
\t key: "Discrete Bar",
\t type: "Snapshot",
\t url: "http://novus.github.com/nvd3/ghpages/discreteBar.html"
\t },
\t {
\t key: "Grouped/Stacked Multi-Bar",
\t type: "Snapshot/Historical",
\t url: "http://novus.github.com/nvd3/ghpages/multiBar.html"
\t },
\t {
\t key: "Horizontal Grouped Bar",
\t type: "Snapshot",
\t url: "http://novus.github.com/nvd3/ghpages/multiBarHorizontal.html"
\t },
\t {
\t key: "Line and Bar Combo",
\t type: "Historical",
\t url: "http://novus.github.com/nvd3/ghpages/linePlusBar.html"
\t },
\t {
\t key: "Cumulative Line",
\t type: "Historical",
\t url: "http://novus.github.com/nvd3/ghpages/cumulativeLine.html"
\t },
\t {
\t key: "Line with View Finder",
\t type: "Historical",
\t url: "http://novus.github.com/nvd3/ghpages/lineWithFocus.html"
\t }
\t ]
\t },
\t {
\t key: "Chart Components",
\t _values: [
\t {
\t key: "Legend",
\t type: "Universal",
\t url: "http://novus.github.com/nvd3/examples/legend.html"
\t }
\t ]
\t }
\t ]
\t }];
\t }
</script>
</body>
</html>