余数据作为d3的数据 [英] ember-data as data for d3

问题描述

我想使用我的emberdata作为在d3中创建对象的数据。我试图将控制器模型中的项目转换为新的javascript对象，并将这个新的数组d3数据。这里是代码

I would like to use my emberdata as data for creating objects within d3. I try to convert the items from the controllers model into new javascript objects and giving this new array to d3 data. here is the code

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

但数据变量ist不是一个数组，所以我不能迭代它

but the data variable ist not realy an array so I cann't iterate over it

推荐答案

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/

一对夫妇。

其次， FixtureAdapter 默认情况下模拟远程响应，因此在 didInsertElement 中， App.Graphic 集合实际上是空的，下一个runloop数组被填充的对象，为了解决这个问题，我使Ember重新计算d3对象每当控制器的长度变化。

Secondly, the FixtureAdapter simulates a remote response by default therefore on didInsertElement the App.Graphic collection was actually empty and it is not until the next runloop that the array was populated with the objects, to fix this, I made Ember re-calculate the d3 object whenever the controller's length changes.

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")
})

这篇关于余数据作为d3的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！