ember.js - ember-data 作为 d3 的数据

Question

我想使用我的 emberdata 作为在 d3 中创建对象的数据。我尝试将 Controller 模型中的项目转换为新的 javascript 对象，并将这个新数组提供给 d3 数据。这是代码

App.GraphicsView = Ember.View.extend( {
didInsertElement: function() {
    var svg = d3.select("#svg");
    var data = this.get('controller').get('model').get('content');
    var newData = [];
    for(var i = 0; i < data.length; i++) {
          newData.push(data[i]);
     }
    var graphics = svg.selectAll("rect")
        .data(newData)
        .enter()
        .append("rect");
    graphics.attr("x", function(d, i) {
        return d.get('x');
    })
}

但是数据变量并不是真正的数组，所以我无法迭代它

Answer 1

Ember 有很多内置迭代器(查看 Ember.Enumerable 文档)。然而，就您而言，只需调用 toArray 就足够了。

App.GraphicsView = Ember.View.extend({
  didInsertElement: function() {
    var svg = d3.select("#svg");
    var data = this.get('controller.content');
    var newData = data.toArray();
    var graphics = svg.selectAll("rect")
      .data(newData)
      .enter()
      .append("rect");
    graphics.attr("x", function(d, i) {
      return d.get('x');
    })
  }
})

编辑:这是你的 fiddle 的工作版本 http://jsfiddle.net/PkT8x/156/

有几件事，首先， fiddle 中的 Ember 和 Ember-Data 版本不兼容。

其次，FixtureAdapter 默认情况下模拟远程响应，因此在 didInsertElement 上，App.Graphic 集合实际上是空的，直到在下一个运行循环中，数组填充了对象，为了解决这个问题，我让 Ember 在 Controller 的长度发生变化时重新计算 d3 对象。

App.GraphicsView = Ember.View.extend({
  graphicsObserver: function() {
    var svg = d3.select("#svg");
    var data = this.get('controller.content');
    var newData = data.toArray();
    var graphics = svg.selectAll("rect")
      .data(newData)
      .enter()
      .append("rect");
    graphics.attr("x", function(d, i) {
      return d.get('x');
    })
  }.observes("controller.length")
})