Question

我无法从这里运行最小的indentedTree示例： 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

的http://nvd3.org/assets/css/nv.d3.css和css

工作代码here

没有运行indentedTree的最小示例

1 个答案: