在 Ember.js 应用程序中渲染 D3 图答案

【问题标题】：Rendering D3 graph in an Ember.js app在 Ember.js 应用程序中渲染 D3 图
【发布时间】：2013-05-23 22:16:22
【问题描述】：

我正在使用 D3.js 强制布局根据 ember.js 模型中的数据绘制节点和链接图。我有一个App.Device 模型和一个App.Interface 模型（网络设备和网络接口），所以我只需要App.Device.find() 和App.Interface.find() 并遍历返回的数据以生成要渲染的节点/链接。

除了，没那么快。 Ember 中的一切都是异步的。我查看了Access model association from view——但使用观察者意味着它仅在模型更改时重绘......而不是在导航到路径时重绘。我也无法弄清楚如何拥有一个作为两个发现结果的模型，因此只能让观察者看到我的两个结果之一。

我还找到了emberjs view with raphael or d3——但那里的所有链接似乎都已失效/过期。

【问题讨论】：

标签： ember.js d3.js

【解决方案1】：

我发现最简单的方法是在路线内创建一个伪复合模型：

App.NetworkmapRoute = Ember.Route.extend({
   model: function() {
      return Ember.Object.create({
         devices: App.Device.find(),
         interfaces: App.Interface.find()
      });
   }
});

然后我可以在控制器上创建计算属性（必须是ObjectController）并在视图中使用观察者来观察这些控制器属性并进行绘图。这似乎有效。

【讨论】：