NVD3 Angular Directive回调过快发射

Question

我最近开始使用NVD3的伟大角度指令来构建D3图表.确实他们很光滑.但是我在回调方面遇到了很多困难.当我使用nv.addGraph()添加回调时,回调效果很好,就像在Alex的回答和示例页面中一样.在这些SO答案中,我在其他建议方面也取得了不同的成功.但是为了让我公司的其他初级程序员更容易,我想使用像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()")

我考虑使用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!");
        });
    }
}

因此,它将在图表渲染后触发,并在返回数据后触发.

查看实例.(用回调更新)