代码之家  ›  专栏  ›  技术社区  ›  HankScorpio

ngClick导致D3图表重新绘制

  •  5
  • HankScorpio  · 技术社区  · 9 年前

    每当我单击其中一个点时,它会导致图表更新。只有当我有 ngClick 关于 <nvd3> 元素(即使侦听器函数不执行任何操作)。如果我删除 ng单击 ,一切都很好。

    我用的是一个很基本的 nvd3 散点图 angular-nvd3 .

    是什么导致了这种奇怪的互动?

    (此录制的帧速率很低,因此很难看到,但每次单击都会重新绘制图表,包括顶部的一次)

    Clicking points on a graph

    这是一个重现问题的双关语:

    http://plnkr.co/edit/F0ZslBaisoHWIp0VcI8o

    谢谢

    更新 我把它缩小到angular-nvd3范围内的一块手表。不知怎么的,ngClick的出现导致了“数据”的改变。 此行正在触发刷新: https://github.com/krispo/angular-nvd3/blob/master/dist/angular-nvd3.js#L328 我的代码中没有任何内容会更改“data”(也验证了对象是指令外的同一实例),在angular-nvd3.js中也没有任何内容可以更改数据。。。

    更新 这是我的点击事件监听器(它是空的):

    controller.handleChartClick = function(event) {
    };
    

    和html:

    <div class="col-sm-10">
        <nvd3 ng-click="observationsCharts.handleChartClick($event)"
                  options="observationsCharts.scatterPlotChartOptions"
                  data="observationsCharts.scatterPlotChartData"></nvd3>
    </div>
    
    2 回复  |  直到 9 年前
        1
  •  2
  •   Stacey Burns    9 年前

    您认为以下手表导致了问题,这是正确的:

    // Watching on data changing
     scope.$watch('data', function (newData, oldData) {
      if (newData !== oldData && scope.chart) {
    
        if (!scope._config.disabled && scope._config.autorefresh) {
            scope._config.refreshDataOnly && scope.chart.update ? scope.chart.update() : scope.api.refresh(); // if wanted to refresh data only, use chart.update method, otherwise use full refresh.
                                }
                            }
                        }, scope._config.deepWatchData);
    

    问题是,如果你在这个函数中添加一个日志来查看新旧数据,那么数据实际上是在变化的。

    单击其中一个点时,nvd3将向数据添加颜色属性。

    旧数据:

    [{"key":"Battery Voltage","values":[{"x":1439419440000,"y":90,"series":0},{"x":1439419440000,"y":43,"series":0},{"x":1439419440000,"y":345,"series":0},{"x":1439167620000,"y":73,"series":0},{"x":1439167620000,"y":42,"series":0},{"x":1439167620000,"y":36,"series":0},{"x":1440010740000,"y":32,"series":0},{"x":1439419440000,"y":62,"series":0},{"x":1439167620000,"y":73,"series":0},{"x":1439167620000,"y":42,"series":0},{"x":1439167620000,"y":36,"series":0}]}] 
    

    新数据:

    [{"key":"Battery Voltage","values":[{"x":1439419440000,"y":90,"series":0,"color":"#1f77b4"},{"x":1439419440000,"y":43,"series":0,"color":"#1f77b4"},{"x":1439419440000,"y":345,"series":0},{"x":1439167620000,"y":73,"series":0},{"x":1439167620000,"y":42,"series":0},{"x":1439167620000,"y":36,"series":0},{"x":1440010740000,"y":32,"series":0},{"x":1439419440000,"y":62,"series":0,"color":"#1f77b4"},{"x":1439167620000,"y":73,"series":0},{"x":1439167620000,"y":42,"series":0},{"x":1439167620000,"y":36,"series":0}],"color":"#1f77b4","value":90}] 
    

    每次单击一个新点时,颜色属性都会添加到对象中,因此监视功能实际上正在正确运行。

    我建议在 https://github.com/krispo/angular-nvd3

    **编辑-只是为了澄清,添加ng点击时发生这种情况的原因是因为这会迫使Angular摘要循环运行,从而触发手表。

        2
  •  2
  •   HankScorpio    9 年前

    看来(目前)唯一的解决方法是使用配置设置 deepWatchData: false 。这可以防止美元手表被频繁触发。

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