Angular UI-Grid and D3 graph in a row

问题

I am wondering if any of you had any experience with injecting a graph into a ui-grid. What I am doing, is I have a row defined as follows:

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

Spark-line-chart directive is responsible for creating a D3 chart (actually, nvd3 to be precise). This creates svg graph.

Now, each time I am trying to sort my table, all of the values within the table get sorted, apart from the graphs. So far, I am mocking up data, and use one array of values for all of the graphs.

Anyone had similar issues, and knows the answer to this question?

回答1:

At first which kind of Angular module for nvd3.js are you using?

If you use angular-nvd3 you can check this example:

http://plnkr.co/edit/XESqEPwfXF3ulQkfuBOE

Pay attention that in your cell templates you must wrap the nvd3 graphic inside a <DIV> with .ui-grid-cell-contents CSS class:

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

来源：https://stackoverflow.com/questions/34809128/angular-ui-grid-and-d3-graph-in-a-row