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

【问题标题】：Rendering d3. chart with Ember.js and a Node.js/mongodb backend渲染 d3。带有 Ember.js 和 Node.js/mongodb 后端的图表
【发布时间】：2014-06-07 09:28:43
【问题描述】：

我正在用 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 获得结果。

【问题讨论】：

欢迎来到 StackOverflow！这是tagName，而不是tagname。
谢谢，我改了。但事实并非如此。图表仍然丢失。为了测试，我放了“Ember.run.once(this, '_renderChart');”在 didInsertElement 中，svg 元素被插入到 DOM 中，但没有数据。
我假设您正在使用 Chrome 调试器并且在控制台中看不到任何消息？
Firefox，我也有 ember 扩展。我明白了：“转换为 'products.index'” ember.js:3521 “total” 450 nv.d3.js:44

标签： javascript node.js mongodb ember.js d3.js

【解决方案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;
    },

【讨论】：