Javascript NVD3角度指令回调触发过快

我最近开始使用NVD3的伟大角度指令来构建D3图表。事实上，它们很圆滑。然而，我在回拨时遇到了很多困难。当我使用nv.addGraph（）添加回调时，回调的效果就足够好了，就像在和中一样。我在其他方面的建议也取得了不同程度的成功。但是为了让我公司的其他初级程序员更容易，我想使用一个HTML指令，如图中所示。大概是这样的：

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

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

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

您也可以尝试使用该指令。它完全通过json与图表一起运行，您还可以访问完整的nvd3核心api

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

1） 。可以使用本指令的

api

属性，如：

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

2） 。另一种方法是使用

config

属性和改变

visible

选项使图表隐藏/可见，如：

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

---

对于使用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!");
        });
    }
}

因此，它将在图表呈现和返回数据后激发

---

看现场直播。（用callback更新）

不确定这是否与问题有关，但在这里结束时搜索callback触发过快。我在Angular指令中遇到了类似的问题，并且回调启动得太快，我只是添加了一个简单的if语句，以查看我试图访问的项是否准备就绪。像这样：

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

---

应该提到的是，使用指令的另一个关键优势是利用Angular的绑定和自动更新。使用nv-addGraph（）可以消除这种灵活性。我还没有尝试过，但它看起来很像Angularjs-nvd3-Directions，至少在名称上是这样，但有一个更为奇特的网站——一个是建立在另一个之上的吗？使用api指令的想法很有趣，因为我以前没有这样做过。但是，这些对回调有什么帮助呢？只是你点击的超时时间为我提供了在创建图表后将事件绑定到图表元素的机制，还是还有其他的作用？首先，angular-nvd3项目最近出现，并且在创建它的基本方法（比较源代码）方面与其他方法有着根本的区别。该指令为整个nvd3核心上的所有图表选项以及图表数据提供了双向绑定机制。它允许您通过JSON动态地从控制器以交互方式自定义图表选项或数据。这是为什么还要开发另一个指令的关键问题。第二，很抱歉，回调机制实际上被遗漏了，感谢您指出这一点。现在已经修好了！我已经用callback更新了答案。我看不到真实的例子…我认为指向plunkr的链接是错误的

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

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