D3：未捕获的 ReferenceError：未定义 stream_layers

Question

我正在使用 nvd3.js 创建一个简单的堆叠条形图，如 here

所述

我在 angular 指令 中添加了链接中提到的代码，如下所示：

app.directive('stackBar', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            nv.addGraph(function() {
                var chart = nv.models.multiBarChart()
                            /*.transitionDuration(350)*/
                            .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
                            /*.rotateLabels(0)    */  //Angle to rotate x-axis labels.
                            .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
                            .groupSpacing(0.1)    //Distance between each group of bars.

                chart.xAxis
                            .tickFormat(d3.format(',f'));

                chart.yAxis
                            .tickFormat(d3.format(',.1f'));

                d3.select(element[0])
                            .datum(exampleData())
                            .call(chart);

                nv.utils.windowResize(chart.update);
                return chart;
            });

            //Generate some nice data.
            function exampleData() {
                return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
                        return {
                            key: 'Stream #' + i,
                            values: data
                        };
                });
            }
        }
    }   
});

这是我的 HTML：

<td class="centered" colspan="5">
      <div stack-bar>

      </div>
</td>

但是，我收到以下错误：

Uncaught ReferenceError: stream_layers is not defined

知道我哪里出错了吗？

此外，“transitonDuration”也不起作用，因此我将其注释掉。我一开始以为，这可能是d3版本的问题，但我使用的是最新版本，问题仍然存在。

编辑：

黄峰的回答帮助我摆脱了错误。但是，我没有得到任何图表，而是得到了很多文本。这是屏幕截图：

知道为什么吗？

此外，该指令位于 ng-repeat 中，这就是为什么屏幕截图中存在多行的原因。

Answer 1

这是因为你没有定义 stream_layers 函数，它也不是 nvd3 lib 中的函数。 它在这里定义：

http://nvd3.org/assets/js/data/stream_layers.js

如果你想使用它，你应该在 html 中包含这个库：

<script src="../stream_layers.js"></script>

如果你想要一个详细的例子，这里有一个供你参考：

http://bl.ocks.org/mbostock/3943967

Answer 2

我遇到了类似的输出（和错误），需要 3 件事情来解决这个问题：

1。将stream_layers.js 添加到路径

正如huan feng 所述，您需要包含stream_layers.js 函数来为示例生成假数据。我从nvd3.org 下载了源代码，stream_layers.js 文件位于novus-nvd3-8ceb270/test/stream_layers.js（您很可能需要根据最新的至少更新路径的第一部分缩短 git 哈希。

2。将transitionDuration 替换为duration

另一个问题是 NVD3 的 API 已更改。检查源代码（novus-nvd3-8ceb270/src/models/multiBarChart.js 中的第 456 行）后，transitionDuration 方法已被替换为仅duration。这是您上面代码中的 sn-p，已更正了持续时间选项：

var chart = nv.models.multiBarChart()
  .duration(350)
  .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
  /*.rotateLabels(0)    */  //Angle to rotate x-axis labels.
  .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
  .groupSpacing(0.1)    //Distance between each group of bars.

3。创建 SVG

最后，您的屏幕截图仅显示文本。我认为这是因为您在需要将图表附加到 SVG 元素时试图将其附加到 div。纠正此问题的一种方法是将 svg 附加到元素 [0]，然后选择该 svg 与您的可视化一起使用：

var svg = d3.select(element[0])
  .append('svg')
  .attr('id', 'my-bar-chart-svg')

d3.select('#my-bar-chart-svg')
   .datum(exampleData())
   .call(chart);

如果您仍然没有看到任何内容，您可能需要调整您创建的 SVG 元素的宽度和高度，以便将图表附加到其中。这是一个快速的测试技巧：

var svg = d3.select(element[0])
  .append('svg')
  .attr('id', 'my-bar-chart-svg')
  .attr('width', 800)
  .attr('height', 400)

d3.select('#my-bar-chart-svg')
   .datum(exampleData())
   .call(chart);