Ember js integrating with D3 - d3.js

Question

I want to include a graphs which have 2-y axis with relevant 2 data sets in my ember project.
Since I am newbie to D3 js as well as ember js I do some googling and come up with npm packages for doing that like these ember-d3, ember-charts, ember-d3-helpers. etc..
But all of them seems to me there is a bit of learning curve.
My questions are, from using those kind of packages can I integrate and draw my graphs?
Or else can I use directly D3 without any npm plunging?
Are there any suitable way to integrate D3 in ember project?

Answer 1

The simplested solution I am currently using is to import your third part libraries using ember-cli-build.js (see code below)
/*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();
};
The code above let you have global access to d3 and c3 (which means which lib can be direct accessed in your window object ).
C3 is a really simple and powerful reusable d3 chart library and I recommend to every new d3 users.
http://c3js.org/
After you have your libs ready, put your chart generate code inside the component's didInsertElement hook (below just a sample and you can make it better for sure)
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);
},
You can read more about Ember dependencies management at,
https://guides.emberjs.com/v2.11.0/addons-and-dependencies/managing-dependencies/