D3 做了哪些 Angular 做不到的事情？答案

【问题标题】：What does D3 do that Angular cannot?D3 做了哪些 Angular 做不到的事情？
【发布时间】：2015-07-23 09:45:23
【问题描述】：

我非常喜欢 D3.js。

我在 Angular 项目中使用它，但我正在考虑摆脱它。也许我错过了什么。

我的理解是，D3 的优势在于能够根据一些数据更新 DOM。以下是我通常会如何使用它：

// JS Data
[{
  id: 1,
  name: 'Red',
  is_warm: true
}, {
  id: 2,
  name: 'Blue',
  is_warm: false
}]

// With the following code:
colors = d3.select($element.find('ul')[0]).selectAll('li.color').data(colorArray, function(d){ return d.id }).enter();
colors.text(function(d) { return d.name }).classed('color', true).classed('warm', function(d) { return d.is_warm; });

<!-- Generates -->
<ul>
  <li class="color warm">Red</li>
  <li class="color">Red</li>
</ul>

但我绝对可以用 AngularJs 做同样的事情：

$scope.colors =     [{
  id: 1,
  name: 'Red',
  is_warm: true
}, {
  id: 2,
  name: 'Blue',
  is_warm: false
}]

<ul>
  <li ng-repeat="color in colors" class="color" ng-class="color.is_warm ? 'warm' : ''"></li>
</ul>

这会产生或多或少相同的代码。

那么在 AngularJs 之上使用 D3 有什么意义呢？

据我了解，主要区别在于何时重绘发生：

使用 D3，应手动调用（例如，当服务器更新数据时）
使用 AngularJs，它将在 $digest 周期内，如果客户端的 CPU 很少，这可能会很慢。

我说的对吗？这是唯一的区别吗？是不是可以手动设置AngularJs重绘频率？那么为什么要使用 D3 和 AngularJs 呢？

谢谢

【问题讨论】：

d3 显然使用了 jQuery 范例。将它与 AngularJS 一起使用简直是无稽之谈，除了可能有短暂的过渡期。
d3、Angular、jQuery 等等……它们都是 JavaScript 的扩展，所以 没有什么可以做而其他人做不到。这只是你需要付出多少努力的问题。
好吧，如果我去 D3 的网站，它在销售宣传中说“D3 对 Web 标准的重视为您提供了现代浏览器的全部功能，而无需将自己绑定到专有框架”——这意味着我喜欢“如果您不喜欢 AngularJS 等大型框架，请使用 D3”
Angular 和 jQuery 可以很好地共存，这里明确说 Yes docs.angularjs.org/misc/… angular.element 将充当 $
我觉得这个问题不会产生有用的答案或 cmets。 D3 能做 Angular 做不到的事情就像在问：洗衣机能做哪些割草机做不到的事情？事实上，它们都是为某种目的而制造的机器。 D3 和 Angular 也是如此，这两个框架是为特定目的而构建的。 D3 用于数据可视化，Angular 用于单页 Web 应用程序。这种讨论可以持续下去，永远不会真正产生有用的东西。这将超出stackoverflow的目的。

标签： javascript angularjs d3.js

【解决方案1】：

要真正回答这个问题：

您不能以这种方式比较 Angular 和 D3。 Angular 是一个应用程序框架，而 D3 是一个数据表示框架。 D3 可以操作 DOM 的事实纯粹是因为它需要某种方式来操作 DOM 以显示数据。

另一方面，Angular 是 MVC 应用程序的框架，不仅限于显示数据，而且比 D3 更通用。

它们都是库，这是相似之处的终结；它们用于不同的目的并执行不同的工作。 D3 实现数据（其中一种方式是通过 DOM），而 Angular 创建丰富的 Web 应用程序。

【讨论】：