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

Question

我用nvd3.js创建简单的堆积条形图所描述这里

我在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中包含这个lib,如:

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

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

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