NVD3 Angular Retirement With Reverse Directorate Too Soon

Question

I recently started using the excellent angular NVD3 directives to build D3 diagrams. Indeed, they are smooth. However, I have many problems with callbacks. Callbacks work quite well when I add them using nv.addGraph (), for example, in Alex's answer and in the sample page . I have also had varying success with the other suggestions in these SO answers . But to facilitate the work of other junior programmers in my company, I would like to use the HTML directive, as shown in the examples on github . Something like that:

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

A function in my scope, called monthCallback, tries to attach attributes, such as headers and events, such as a click, to each .nv line in the chart. The problem is that the chart starts to be visualized before the data is returned from the ajax request, and therefore monthCallback is started before any .nv-bar is displayed on the page. (Note: it doesn't seem to matter if the callback is declared using parentheses, ie Callback = "monthCallback" versus callback = "monthCallback ()")

I considered using a bypass by liptga or DavidSouther's answer, but the link to the callback to the transition seemed to be the wrong way to solve this problem. Any other suggestions for triggering a callback at the right time using the HTML directive?

Answer 1

angular-nvd3. json, nvd3 core 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!");
        });
    }
}

, .

. ( )

Answer 2

, , , . Angular, Callback , if, , , ,. :

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