Question

我最近开始使用NVD3的伟大角度指令来构建D3图表。确实他们很光滑。但是我在回调方面遇到了很多困难。当我使用nv.addGraph（）添加回调时，回调功能就足够了，就像在Alex's answer和examples page中一样。我在these SO answers中的其他建议也取得了不同的成功。但是为了让我公司的其他初级程序员更容易，我想使用像examples on github那样的HTML指令。像这样：

<nvd3-multi-bar-chart
   data="monthData"
   id="monthDataChart"
   ... other properties ...
   callback="monthCallback">
   <svg></svg>
</nvd3-multi-bar-chart>

我的范围中名为monthCallback的函数尝试将属性（如标题和事件，如click）附加到图表中的每个.nv-bar。问题是图表在数据从ajax请求返回之前开始呈现，因此在页面上有任何.nv-bar之前会触发monthCallback。（注意：回调是否用括号声明似乎没有区别，即callback =“monthCallback”与callback =“monthCallback（）”）

我考虑使用workaround by liptga或DavidSouther的答案，但将回调链接到转换似乎是解决此问题的错误方法。有关使用HTML指令在正确的时间触发回调的任何其他建议吗？

Answer 1

您也可以尝试angular-nvd3指令。它完全通过json运行图表，您还可以访问完整的nvd3核心API。

在您的情况下，您需要以某种方式刷新图表。

1）。可以使用此指令的api属性，如：

//in html
<nvd3 options="options" data="data" api="api"></nvd3>

然后在控制器中，您可以使用以下命令在任何地方完全刷新指令：

//javascript
$scope.api.refresh();

2）。另一种方法是使用config属性和不同的visible选项隐藏/显示您的图表：

<nvd3 options="options" data="data" config="{ visible: false }"></nvd3>

例如，如果还没有数据，请设置visible: false。返回数据时，请设置visible: true。见下面的实例。

3）。最简单的方法是只更改数据，并自动使用新数据刷新指令：

//javascript
$scope.data = newData;
$scope.$apply();  //sometimes you need to refresh the scope

至于你使用ajax的情况，它可能看起来像：

//ajax request; in the live example below I use timeout 
$http.get("/some_url/")
     .success(function(data){
          $scope.data = data;
          $scope.$apply();
          //chart will render after the data returns
     })

回调函数定义为任何其他选项：

//javascript, in controller
$scope.options = {
    ..., //any other options
    callback: function(){
        d3.selectAll(".nv-bar").on('click', function(){
            alert("Hi, I'm callback!");
        });
    }
}

因此，它会在图表渲染后触发，并在返回数据后触发。

查看直播example。（用回调更新）

Answer 2

不确定这个问题是否与此问题有多大关系，但最终通过过早搜索回调来结束。我有与Angular指令类似的问题，并且Callback的触发速度太快，我只是添加了一个简单的if语句来查看我尝试访问的项目是否准备就绪。像这样：

    callback(chart) {
      if (chart && chart.interactiveLayer) {
      // do something

NVD3 Angular Directive回调过快发射

2 个答案: