Angular uiGrid：D3 CellTemplate 未排序答案

【问题标题】：Angular uiGrid: D3 CellTemplate not sortingAngular uiGrid：D3 CellTemplate 未排序
【发布时间】：2017-08-19 21:34:10
【问题描述】：

我正在尝试在 UiGrid 角度库中显示自定义 D3 cellTemplate 并实现排序功能。通过遵循这个answer，我能够实现它，但使用了自定义目录而不是nvd3。对于使用自定义模板（此处为 D3 元素）对列进行排序，我正在使用 uiGrid 的sortingAlgorithm 属性。问题是一旦为整个网格绘制了 D3，在排序时它就不会更新。

columDef：

columnObj = {
                field: reportEvidenceHeaders[i],
                enableHiding: false,
                headerTooltip: true,
                cellTemplate: '<div class="ui-grid-cell-contents"><ui-grid-bar-chart data="row.entity.'+reportEvidenceHeaders[i]+'"></ui-grid-bar-chart></div>',
                sortingAlgorithm: uiGridViewSorting
            };

uiGridView排序：

var uiGridViewSorting = function(a, b, rowA, rowB, direction){
          a = Number(a.split("/")[0]);
          b = Number(b.split("/")[0]);
          if (a == b) return 0;
          if (a < b) return -1;
          return 1;
      };

ui-grid-bar-chart 是 D3 目录。

ui-grid-bar-chart：

link: function(scope, element, attrs){
    d3.select(element[0]).append("svg").height("100%").width("100%");
}

在这里，我将 D3 附加到 element[0]。

网格：

第一张图上的网格看起来不错。

但在排序时，除了包含 D3 元素的列之外，所有其他列都会更新。

Plunker：Here

这里有什么问题？

【问题讨论】：

你能提供一个 Plunker 的例子吗？
@KScandrett 我的坏，以前一定做过，请在编辑的问题中找到 plunker 链接。

标签： javascript angularjs sorting d3.js svg

【解决方案1】：

有两个问题。

您需要将图形的绘制包裹在 $watch 中，否则当网格更改时它不知道重绘（更详细的说明：https://github.com/angular-ui/ui-grid/issues/743）。这修复了滚动和其他列上的排序，但它本身不会修复图形列上的排序：

scope.$watch('data', function() {
   drawUiGridBarChart(scope.data, scope.width);
});

现在修复此列的排序，field 需要指向spark.data

{ field: 'spark.data', // not field: 'uiGrid', 
    cellTemplate: '...

更新的 Plunker：https://plnkr.co/edit/t281BcETvrLihSBAcWWo?p=preview

【讨论】：

它似乎有效！即使添加 sortAlgorithm 而不是 field: 'spark.data' 也可以在 d3 列上进行排序。谢谢。