Ember js与D3集成

我想包含一个图表，其中包含2-y轴和我的余烬项目中的相关2个数据集。Ember js与D3集成

因为我是新手，D3 JS和JS的余烬我做了一些google搜索，并拿出NPM包做，像这样的ember-d3，ember-charts，ember-d3-helpers。等等。

但是他们都认为我有一点学习曲线。我的问题是，从使用这些软件包我可以整合和绘制我的图表？

或者我可以直接使用D3而不需要任何npm跳入？

是否有任何合适的方式将D3集成到了烬宝项目中？

2017-02-25 Prageeth

我目前使用的simplested解决方案是使用ember-cli-build.js导入你的第三个零件库（见下面的代码）

/*jshint node:true*/ 
/* global require, module */ 
var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 

module.exports = function(defaults) { 
    var app = new EmberApp(defaults, { 
    // Add options here 
    }); 

    app.import('./bower_components/d3/d3.js'); 
    app.import('./bower_components/c3-0.4.11/c3.js');   
    app.import('./bower_components/c3-0.4.11/c3.css'); 

    return app.toTree(); 
};

上面的代码让你不得不D3和C3（这意味着它的lib可全球访问可以直接在你的窗口对象中访问）。

C3是一个非常简单而强大的可重复使用的d3图表库，我向每位新的d3用户推荐。

http://c3js.org/

之后，你有你的库准备好了，把你的图表生成组件的didInsertElement钩内部代码（只是一个样本的下方，你可以把它肯定更好）

didInsertElement() { 
    this._super(...arguments); 

    const chart = c3.generate({ 
     data: { 
      columns: [] 
     }, 
     axis: { 
      x: { 
       type: 'category', 
       categories: [ 

       ] 
      } 
     }, 
     zoom: { 
      enabled: true 
     }, 
     legend: { 
      show: false 
     }, 
     grid: { 
      y: {show: true} 
     } 
    }); 

    this.set('globalChart.lineChart', chart); 
},

你可以阅读更多关于Ember依赖管理处，

https://guides.emberjs.com/v2.11.0/addons-and-dependencies/managing-dependencies/

来源

2017-02-25 09:11:20

Ember js与D3集成

回答

相关问题