不是运行 indentedTree 的最小示例

Question

我无法从这里运行最小缩进树示例： http://nvd3.org/examples/indentedtree.html

我使用的是最新版本的 d3 (3.5.15) 和 nvd3 (1.8.1)。

我的文件夹如下所示。

我不明白为什么以下代码在我的浏览器中没有显示任何内容，因为它基本上是上面提到和链接的最小示例的复制粘贴。有什么想法吗？

mychart.html

<!DOCTYPE html>
<html>
    <head>
        <title>Table</title>
        <link href="nv.d3.min.css" rel="stylesheet" type="text/css">
        <script src="d3.min.js"></script>
        <script src="nv.d3.min.js"></script>
    </head> 
    <body>
    <div id="chart"></div>
        <script src="mychart.js"></script>
    </body>
</html>

mychart.js

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"
          }
        ]
      }
    ]
  }];
}


nv.addGraph(function() {
  var chart = nv.models.indentedTree()
    .columns([
      {
        key: 'key',
        label: 'Name',
        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'
      }
    ])
    ;

  d3.select('#chart')
    .datum(testData())
    .call(chart)
    ;

  return chart;
});

Answer 1

是的，最新的 NVD3(1.8.1) cdn 不支持 nv.models.indentedTree

所以从这里拿起 nv.d3 http://nvd3.org/assets/js/nv.d3.js 和 css 来自 http://nvd3.org/assets/css/nv.d3.css

工作代码here

不是运行 indentedTree 的最小示例

Not running minimal example of indentedTree

d3.js

nvd3.js

不是 运行 indentedTree 的最小示例

Not running minimal example of indentedTree

d3.js

nvd3.js

不是运行 indentedTree 的最小示例