NVD3 Angular指令回调函数触发过早

Question

NVD3 Angular指令回调函数触发过早

javascriptangularjsd3.jscallbacknvd3.js

4

我最近开始使用NVD3的出色Angular指令来构建D3图表。它们确实很流畅。然而，我在回调方面遇到了很多困难。当我使用nv.addGraph()添加它们时，回调可以正常工作，就像Alex's answer和examples page中所示。我也尝试了这些SO答案中的其他建议，但为了让我们公司的初级程序员更容易理解，我想使用HTML指令，就像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" vs. callback="monthCallback()"），似乎都没有区别）

我考虑使用liptga的解决方法或DavidSouther的答案，但将回调链接到转换似乎不是解决这个问题的正确方法。还有其他建议可以使用HTML指令在正确的时间触发回调吗？

- moshefnord

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

2个回答

0

不确定是否与问题有关，但是通过搜索回调函数过早触发而到达此处。我在使用Angular指令时遇到了类似的问题，回调函数触发得太快了，所以我只需添加一个简单的if语句来检查我要访问的项目是否准备就绪。像这样：

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

- Shnigi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- krispo · Accepted Answer

你可以尝试使用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!");
        });
    }
}

所以它将在图表渲染后触发，并在数据返回后触发。

查看实时示例。（已更新回调）