ember-d3

ember-d3

This addon does one thing: package all the modules within d3@4.x into your app or addon, so you can use D3 as you please on its own or as part of a visualisation addon.

ember install ember-d3

# You might also need to add d3 directly to your project:
yarn add d3@latest

Requirements:

• NPM >= 3 (Check by running npm version)
• Node >= 8 (Check by running node --version)
• Ember CLI >= 2.16 (Check by running ember version)

You can upgrade NPM by running:

npm i -g npm@3

If you're looking for the ember-d3 for d3@3.x, see the v3 branch.

Advanced Installation

You can specify any d3 version on the v4 release by adding it to your project:

npm install --save-dev d3@4.9.1

Configuration and Usage:

There's two ways to use this library in your project, you can either load just the APIs you desire, or you can import the entire D3 object (similar to version 3).

Option 1:

import { line } from 'd3-shape'
import { scaleOrdinal } from 'd3-scale'
import { extent } from 'd3-array'

Option 2:

See Global D3 section below for configuration

import D3 from 'd3'

We've put together a complete demo component which you can use to really get a feel for how to use the different packages provided by this addon.

Global D3

We don't support the global window.d3 object, as this is viewed as an anti-pattern. However, you can expose a bundled import of d3 by enabling the bundle config flag:

module.exports = function() {
  return {
    'ember-d3': {
      bundle: true
    }
  }
}

This will allow you to do:

import d3 from 'd3'

Note: This will disable support for using the dependency whitelist/blacklist.

Dependency whitelist/blacklist

In case you do not want to include all of d3's dependencies, you may whitelist the packages that you want to include in your project's config/environment.js file.

For example, if you only wanted to use d3-scale, you would do:

// config/environment.js
module.exports = function() {
  return {
    'ember-d3': {
      only: ['d3-scale']
    }
  }
}

Or if you want to exclude a package:

// config/environment.js
module.exports = function() {
  return {
    'ember-d3': {
      except: ['d3-scale']
    }
  }
}

Note: Even though you only add d3-scale, it has a few transitive d3 dependencies. These are added to your project automatically.

Running Tests

• yarn test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Contributing

This addon is developed by the community and is maintained by Ivan Vanderbyl.

All contributions are welcome by opening an issue or Pull Request.

Changelog

v0.4.0 (February 1st, 2018)

Pull Requests

• #24 Expose library version to ember by brzpegasus
• #2 Update ember-cli by Mike North
• #6 Fix loading in engines by Cropster
• #8 Added support for loading D3 v4 by Ivan Vanderbyl
• #18 add note about supported npm version by sly7-7
• #14 bump version by sly7-7
• #3 Fastboot compatibility by Mike North
• #27 Use "var" instead of "let" by Kamil Ejsymont
• #28 Fix package name checking for svelte builds. by Eric Black
• #33 Fix Windows issues using path.posix.join by brianhjelle
• #36 (feature) Use Rollup and simplify loading internals by Ivan Vanderbyl
• #47 Prettier all the things by Ivan Vanderbyl

• #47 Prettier all the things
• #36 Refactor internal loader to use Ember CLI's AMD transform and fix up module resolving in host application. Now supports plugins and custom versions of D3.