Question

我想在我的ember项目中包含一个2-y轴和相关2个数据集的图形。

由于我是D3 js以及ember js的新手，我做了一些谷歌搜索并提出了npm包，就像这些ember-d3，ember-charts，ember-d3-helpers一样。等等。

但在我看来，所有这些都有一些学习曲线。我的问题是，通过使用这些类型的包，我可以整合和绘制我的图形吗？

或者我可以直接使用D3而没有任何npm插入？

有没有合适的方法将D3整合到ember项目中？

Answer 1

我目前使用的简单解决方案是使用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/

准备完lib后，将图表生成代码放在组件的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/

Ember与D3融为一体

1 个答案: