渲染d3。 Ember.js和Node.js / mongodb后端的图表

Question

我在用ember，d3和node做一个小例子。 不知何故，我无法让ember插入svg元素。 我从mongodb获取数据。 但是render_chart函数永远不会被调用。 我正在等待ready和isLoaded状态...

使用ember 1.5.0和ember-data 1.0.0-beta.7 + canary.75ab8043，

这个BaseChartView.js文件

define(['app'], function(App) {
    App.BaseChartView = Ember.View.extend({
        tagName: 'svg',
        _elementReady: false,

        prepareChart: function() {
            return nv.models.pieChart();
        },
        prepareData: function() {
            return [];
        },

        didInsertElement: function() {
            var view = this;

            $(this).empty();

            nv.addGraph(function() {
                var chart = view.prepareChart();

                view.set('_chart', chart);
                view.set('_elementReady', true);
                return chart;
            });
        },

        mapProperties: function(content) {
            var props = Array.prototype.slice.call(arguments, 1);

            var items = content.map(function(item) {
                return item.getProperties(props);
            });

            return items;
        },

        _renderChart: function() {
            if (!this.get('ready')) {
                return;
            }

            var content = this.get('content');
            var data = this.prepareData(content);

            d3.select(this.$()[0])
                .datum(data)
                .transition().duration(200)
                .call(this.get('_chart'));
        }.observes('ready'),

        ready: function() {
            return this.get('content.isLoaded') && this.get('_elementReady');
        }.property('content.isLoaded', '_elementReady')

    });

    return App.BaseChartView;
});

ProductsByRatingChartView.js文件

define(['app', './BaseChartView'], function(App, BaseChartView) {

    App.ProductsByRatingChartView = BaseChartView.extend({

        prepareData: function(content) {
            var items = this.mapProperties(content, 'rating');

            var groups = d3.nest()
                .key(function(d) {
                    return d.rating;
                })
                .entries(items)
                .map(function(g) {
                    return {
                        rating: g.key,
                        count: g.values.length
                    };
                });

            return [{
                key: '',
                values: groups
            }];
        },

        prepareChart: function() {

            var chart = nv.models.pieChart()
                .x(function(d) {
                    return d.rating + '\u2605';
                })
                .y(function(d) {
                    return d.count;
                })
                .showLabels(true)
                .labelThreshold(0.05)
                .labelType("percent")
                .donut(true)
                .donutRatio(0.35);

            return chart;
        }

    });
});

更新：app.js已添加

define(['ember', 'ember-data', 'nvd3', 'jquery-ui'], function(Ember) {

var App = window.App = Ember.Application.create({ LOG_TRANSITIONS: true});

App.ApplicationAdapter = DS.RESTAdapter.extend();   

  App.Product = DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string'),
    category: DS.attr('string'),

    price: DS.attr('number'),
    rating: DS.attr('number'),
    reviews: DS.attr('number')
  });



App.Router.map(function() {
    this.resource('products', function() {
        this.resource('product', { path: '/:product_id' } )
    });    
});

App.IndexRoute = Ember.Route.extend({
   redirect: function() {
     this.transitionTo('products');
   }
 });

 App.ProductsRoute = Ember.Route.extend({
    model: function() {
      return this.store.find('product');
    }
  });

  App.ProductRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('product', params.product_id);
    }
  });


  App.ProductsController = Ember.ArrayController.extend();


 return App;
});

虽然这不是我的仓库，但几乎是相同的： https : //github.com/GuilhouT/NTNAnalytics

我怀疑从未调用_renderChart函数

我也从mongodb获得结果。

Answer 1

解决方案是使用on（'init'），因为未监视计算的属性

 _renderChart: function() {
        if (!this.get('ready')) {
            return;
        }

        var content = this.get('content');
        var data = this.prepareData(content);

        d3.select(this.$()[0])
            .datum(data)
            .transition().duration(200)
            .call(this.get('_chart'));
    }.observes('ready').on('init'),

另外prepareData需要返回变量组：

 prepareData: function(content) {
        var items = this.mapProperties(content, 'rating');

        var groups = d3.nest()
            .key(function(d) {
                return d.rating;
            })
            .entries(items)
            .map(function(g) {
                return {
                    rating: g.key,
                    count: g.values.length
                };
            });

        return groups;
    },