3

我想将我的 emberdata 用作在 d3 中创建对象的数据。我尝试将控制器模型中的项目转换为新的 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');
    })
}

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

4

3 回答 3

3

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');
    })
  }
})

编辑：这是您的小提琴http://jsfiddle.net/PkT8x/156/的工作版本

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

其次，FixtureAdapter默认情况下模拟远程响应，因此集合实际上是空didInsertElement的App.Graphic，直到下一个运行循环才用对象填充数组，为了解决这个问题，我让 Ember 在控制器长度时重新计算 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")
})
于 2013-04-15T13:29:54.373 回答
1

这是另一个例子：http: //jsfiddle.net/2UPLp/16/light/

要求：

d3.v2.min.js
handlebars-1.0.0.beta.6.js
ember-1.0.pre.min.js
于 2013-05-30T19:32:06.777 回答
0

这是另一种方法

https://github.com/sabithpocker/ember-appkit-d3-sample

这种特殊的方法是使用 d3 生成路径并使用 Ember 将其绑定到 svg。这将导致路径响应应用程序中的数据更改。该示例不使用 d3 来呈现 svg，而是使用 d3 API 来计算路径并在 svg 中使用它。

于 2014-03-05T19:16:40.677 回答