Angular UI-Grid 和 D3 图形连续答案

【问题标题】：Angular UI-Grid and D3 graph in a rowAngular UI-Grid 和 D3 图形连续
【发布时间】：2016-01-15 10:33:50
【问题描述】：

我想知道你们是否有任何将图形注入 ui-grid 的经验。我在做什么，是我有一行定义如下：

  { name:'Column Name', cellTemplate: '<spark-line-chart values="grid.appScope.valuesStacked"></spark-line-chart>'}

Spark-line-chart 指令负责创建 D3 图表（实际上，准确地说是 nvd3）。这将创建 svg 图。

现在，每次我尝试对表格进行排序时，表格中的所有值都会被排序，除了图表。到目前为止，我正在模拟数据，并为所有图表使用一组值。

有人遇到过类似的问题，知道这个问题的答案吗？

【问题讨论】：

我不知道 ui-grid...但是，显然，ui-grid 正在交换行的内容以进行排序，但它不能移动图形行。尝试直接对数据排序，创建一个过滤器：data="myList | mySorter : selectedSorter" 强制更新所有行
@JoaozitoPolo，实际上，当我将其他一些与对象相关的数据添加到带有图形的单元格中时，它会对数据进行排序，但会将图形排除在外。
您不能使用用户定义的排序功能 (github.com/timothyswt/ng-grid/wiki/Sorting-and-Filtering) 解决这个问题吗？

【解决方案1】：

首先你使用的是哪种类型的 nvd3.js Angular 模块？

如果你使用angular-nvd3，你可以查看这个例子：

请注意，在您的单元格模板中，您必须使用.ui-grid-cell-contents CSS 类将 nvd3 图形包装在 <DIV> 中：

<div class="ui-grid-cell-contents">
  <nvd3 options="row.entity.spark.options" data="row.entity.spark.data"></nvd3>
</div>

【讨论】：