Javascript D3:未捕获引用错误：未定义流\u层

我使用nvd3.js创建了一个简单的堆叠条形图，如前所述

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

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>

知道我哪里出错了吗

另外，“transitonDuration”也不起作用，所以我把它注释掉了。我最初认为，这可能与d3版本有关，但我使用的是最新版本，问题仍然存在

编辑：

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

      </div>
</td>

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

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

      </div>
</td>

知道为什么吗

---

另外，该指令位于一个ng repeat中，这就是屏幕截图中有多行的原因。

这是因为您没有定义stream_layers函数，而且它也不是nvd3库中的函数。 它的定义如下：

如果要使用它，应在html中包含此库，如：

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

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

---

我遇到了类似的输出（和错误），需要解决以下问题：

1.将

stream_layers.js

添加到路径 正如前面提到的，您需要包含

stream_layers.js

函数来为示例生成假数据。我从下载了源代码，

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

方法已被替换为just

duration

。下面是您的代码片段，其中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]，然后选择要与可视化一起使用的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);

---

这个函数在什么地方可用吗？或者，不是有一个简单的堆积条形图的例子吗？它只是一个数据生成器。我已经更新了答案，你可以在那里找到stream_layer函数的定义。错误得到了修复，但我在屏幕上看到了很多文本，没有图表。上传问题中的屏幕截图。@h黄峰，我编辑了这个问题，你能看一下吗？@huang feng，这是全部代码，不包括生成器和HTML，我在其中包含了库。