Javascript 角度uiGrid:D3单元格模板未排序

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

columDef：

这里，我将D3追加到元素[0]上

网格：

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

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

普朗克：

这里有什么问题？

有两个问题

您需要将图形的绘图包装在$watch中，否则它不知道在网格更改时重新绘制更详细的解释如下：。这将修复其他列上的滚动和排序，但其本身不会修复图形列上的排序：

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

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

---

更新的Plunker:

你能提供一个Plunker示例吗？@KScandrett My Bad，一定以前做过，请在编辑的问题中找到Plunker链接。它似乎有效！甚至添加排序算法而不是字段：“spark.data”也可以对d3列进行排序。谢谢

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;
      };

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

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

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