Ember jsとD3との統合

Question

emberプロジェクトに関連する2つのデータセットを持つ2-y軸を持つグラフを含めたいと思います。

私はD3 JSへの初心者だけでなく、燃えさしJSだので、私はいくつかのグーグルを行うと、これらのember-d3のようにそれを行うためのNPMパッケージ、ember-charts、ember-d3-helpersを思い付きます。

しかし、それらのすべては私には習得の曲線が少しあるようです。 私の質問は、そのような種類のパッケージを使用することから、グラフを統合して描くことができますか？

それ以外の場合、npmを急激に変化させずにD3を直接使用できますか？

EmberプロジェクトでD3を統合する適切な方法はありますか？

Answer 1

私が現在使用しています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(); 
}; 

上記のコードは、どのlibに缶を意味します（D3およびC3へのグローバルアクセス権を持ってみましょうあなたのウィンドウオブジェクトに直接アクセスすることができます）。

C3は本当にシンプルで強力な再利用可能なd3チャートライブラリです。私はすべての新しいd3ユーザーにお勧めします。

http://c3js.org/

あなたのLIBSの準備ができていたら、あなたのチャートを入れて（単にサンプルの下に、あなたは確かにそれを改善することができます）、コンポーネントの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/