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

Question

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

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

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

知道我哪里错了吗？

此外，＆＃39; transitonDuration＆＃39;也没有工作，所以我评论了它。我最初认为，这可能是与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

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。以下是上述代码中的代码段，并更正了持续时间选项：

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]，然后选择要用于vizualization的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);