Angular uiGrid: D3 CellTemplate nicht sortieren

Question

Ich versuche benutzerdefinierte D3 cellTemplate in UiGrid eckigen Bibliothek zu zeigen und die Sortierfunktion zu implementieren. Indem ich diesem answer folgte, war ich in der Lage, es zu implementieren, aber benutzte ein kundenspezifisches Verzeichnis anstelle von nvd3. Zum Sortieren von Spalten mit benutzerdefinierten Vorlagen (hier D3-Elemente) verwende ich das SortingAlgorithm-Attribut von uiGrid. Das Problem ist, sobald die D3 für das gesamte Raster gezeichnet wird, beim Sortieren wird nicht aktualisiert.

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

uiGridViewSorting:

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-Diagramm ist das D3-Verzeichnis.

ui-Gitter-Balkendiagramm:

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

Hier bin ich Anfügen der D3 auf element[0].

Grid:

Das Raster auf der ersten Zeichnung sieht gut aus.

Bei der Sortierung werden jedoch alle anderen Spalten aktualisiert, mit Ausnahme der Spalte, die die D3-Elemente enthält.

Plunker: Here

Was ist das Problem hier?

Answer 1

Es gibt zwei Probleme.

Sie müssten die Zeichnung des Diagramms in eine $watch umbrechen, sonst weiß es nicht neu zu zeichnen, wenn sich das Raster ändert (genauere Erklärung hier: https://github.com/angular-ui/ui-grid/issues/743). Dies behebt Scrollen und auf den anderen Spalten sortieren, sondern von selbst wird es fix nicht in der Grafik Spalte Sortierung:

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

nun auf dieser Spalte zu fixieren Sortierung, field Bedürfnisse spark.data

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

Punkt

Aktualisiert Plunker: https://plnkr.co/edit/t281BcETvrLihSBAcWWo?p=preview