D3 动画（过渡）不适用于 Angular 应用答案

【问题标题】：D3 animation (transition) does NOT work on Angular appD3 动画（过渡）不适用于 Angular 应用
【发布时间】：2014-12-31 17:49:55
【问题描述】：

我破解了一个指令，指令中包含一个简单的饼图。这是jsfiddle 中有效的确切示例。但是，一旦我尝试将其移至我的 Web 应用程序，我会在上一个会话（叠加）之上构建图表，但没有动画。我没有控制台错误。当我为数据记录日志时，数据正在正确传递。

这是我目前使用的软件： AngularJS v1.2.1， D3 版本：“3.4.13”，它由 Express 和 NodeJS 托管。

关于可能导致此错误的任何建议。我不想每次获得新数据时都必须重置 SVG，我想要平稳过渡。

var App = angular.module('App', ['ngRoute', 'ngCookies']);
App.directive('barsChart', function($parse) {
d3.edge = {};

d3.edge.donut = function module() {

    var width = 460,
        height = 300,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.category20();
   .............//rest is the same as the js fiddle example

【问题讨论】：

found this stack 这可以帮助我弄清楚为什么这不起作用。 requestAnimationFrame 可能是导致动画不起作用的原因。

标签： javascript angularjs node.js svg d3.js

【解决方案1】：

在使用 ang angularjs/D3js Web 应用程序时，我发现我已经导入了一些导致 D3 转换崩溃的库。以下是导致 d3 动画崩溃的其他库的列表： -引导程序 v2.0.4 -Bootstrap 响应式 v2.0.4 -Date.js（网站：http://www.datejs.com/ 或 http://www.coolite.com/datejs/）。一旦这些库被禁用。我能够看到和使用过渡。

【讨论】：