NVD3 Angular 指令回调触发太快答案

【问题标题】：NVD3 Angular Directive callback firing too soonNVD3 Angular 指令回调触发太快
【发布时间】：2014-05-29 07:57:56
【问题描述】：

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

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

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

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

【问题讨论】：

应该提到，使用指令的另一个关键优势是利用 Angular 的绑定和自动更新。使用 nv-addGraph() 消除了这种敏捷性。

标签： javascript angularjs d3.js callback nvd3.js

【解决方案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。（用回调更新）

【讨论】：

还没有尝试过，但这看起来至少在名称上与 Angularjs-nvd3-directives link 相似，但有一个更高级的网站 - 是建立在另一个之上的吗？使用 api 指令的想法很有趣，因为我以前没有这样做过。但是这些对回调有什么帮助呢？
只是您的点击超时为我提供了在创建图表后将事件绑定到图表元素的机制，还是这里有更多的东西？
首先，angular-nvd3 项目最近出现了，在创建的基础方法上与其他项目有根本的不同（比较源代码）。该指令为完整 nvd3 核心上的所有图表选项以及图表数据提供双向绑定机制。它允许您通过 JSON 以交互方式自定义图表选项或来自控制器的数据。这是开发另一个指令的关键问题。
第二，对不起，回调机制实际上是错过了，感谢您指出这一点。现在它是固定的！我已经用回调更新了答案。
我看不到现场示例...我认为指向 plunkr 的链接是错误的

【解决方案2】：

不确定这是否与问题有很大关系，但在这里结束时搜索回调触发太快了。我在使用 Angular 指令时遇到了类似的问题，并且 Callback 触发得太快了，我只是添加了一个简单的 if 语句来查看我尝试访问的项目是否已准备好。像这样：

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

【讨论】：