How to use d3-selection-multi

[sly7-7]

since d3-selection-multi is not part of the default bundle (see the last paragraph at https://github.com/d3/d3-selection/releases/v1.0.0), how do you set multiple values to style() at once ? In D3 v3, you could pass an object to selection.style().

[ivanvanderbyl]

@sly7-7 thanks for pointing this out. We'll need to add support for additional D3 plugins to support this, as our current module lookup is tightly coupled to the dependencies of the d3 package.

This is definitely possible and is probably a good idea to support loading other non-standard plugins.

[ivanvanderbyl]

One way I could see this working, which would be easy for the user to work with, is to just look at the dependencies of the parent project ingesting this addon and load anything starting with d3-.

[sly7-7]

@ivanvanderbyl Thanks for the answer. I would be happy to try to tackle this, so if I understand,

• A user will install the plugins via npm install d3-*
• In d3-deps-for-package you would complete the actual deps by walking the user's project's package.json and load all d3-* modules ?

Also, I'm not sure what loading a module means. For example in d3-selection-multi,there is no exported funtions, but this file must be interpreted in order to complete the d3.selection.prototype.

I'm sorry, despite the fact I'm consuming the ember-cli ecosystem, I didn't dig into addon development yet, and I know almost nothing about how node modules are working 😞 , so I you could provide me some guidance, that would be great 😄

[ivanvanderbyl]

@sly7-7 it's far from straight forward unfortunately, which is why this addon exists.

Under the hood, each addon is processed by ember-cli, and provides ember-cli with broccoli trees for each section of the addon (app, addon ,vendor, tests etc). In our case we build a custom tree for vendor which contains each d3 package, correctly named and converted to AMD so you can import it using import selection from 'd3-selection etc.

We already have most of what we need to make this work, except for simplicity at the moment we just resolve modules from the d3 npm package's package.json. This would probably work if we can just extend that to also check the dependencies of the parent addon, but this gets tricky because ember-cli doesn't expose a solid API for detecting what that is. You'll see in index.js that we search app.app until we find it.

IIRC app.app.project has an API for querying the dependencies of the parent addon, so that'd be a place to start.

[sly7-7]

I've tried playing with that, but it appears an obscure error for me, something during the AMD rewrite.

for the d3-selection-multi: `[{value: d3-selection-multi, loc: null, type: Literal, comments: null, regex: null}, {elements: , loc: null, type: ArrayExpression, comments: null}, ] does not match field "arguments": [Expression | SpreadElement] of type CallExpression``

I think it's because d3-selection-multi does not export anything, but simply modify the prototype of d3-selection. This may be related: d3/d3-selection-multi#6 and rollup/rollup#738

At this point, I don't know what need to be done...

[IAmJulianAcosta]

I created a PR that will load any D3 plugin that appears in package.json. This is far to be an optimal solution, but it works fine.

[ivanvanderbyl]

Support for custom d3 modules has been added to the latest beta: ember-d3@0.4.0-beta.6

Instructions:

1. Install the addon
2. Install d3 and d3-selection-multi
3. Profit