Skip to content
This repository has been archived by the owner. It is now read-only.

Can't quite figure out how to use this library (webpack / es6) #8

Closed
alex-wilmer opened this issue Oct 7, 2016 · 5 comments
Closed

Can't quite figure out how to use this library (webpack / es6) #8

alex-wilmer opened this issue Oct 7, 2016 · 5 comments

Comments

@alex-wilmer
Copy link

@alex-wilmer alex-wilmer commented Oct 7, 2016

attrs is not a function

example http://www.webpackbin.com/EyWwxy-RW

import * as d3 from 'd3'
import 'd3-selection-multi'

d3.select('body')
  .append('svg')
  .append('rect')
  .attr('class', 'box')
  .attr('x', 20)
  .attr('y', 20)
  .attr('height', 100)
  .attr('width', 200)
  .attr('fill', 'blue')

d3.select('.box')
  .attrs({ fill: 'red' })
@mbostock

This comment has been minimized.

Copy link
Member

@mbostock mbostock commented Oct 7, 2016

The code looks right. However, you also need to configure Webpack to pull from the ES6 source (the module or jsnext:index entry points defined in the package.json), not the published generated UMD bundle. I’m not especially familiar with Webpack, so I’m not sure if that feature is available on WebpackBin (though it certainly should be!).

Please use Stack Overflow tag d3.js to ask for help. Although I make an effort to assist everyone that asks, I am not always available to provide help promptly or directly. Stack Overflow provides a better collaborative forum for self-help: tens of thousands of D3-related questions have already been asked there, and some answered questions may be relevant to you.

When asking for help, please include a link to a live example that demonstrates the issue, preferably on bl.ocks.org. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗

@mbostock mbostock closed this Oct 7, 2016
@alex-wilmer

This comment has been minimized.

Copy link
Author

@alex-wilmer alex-wilmer commented Oct 10, 2016

Just in case anyone runs into this issue...

The way I patched it was moving the exact file I wanted into my own source folder then adding it to the prototype myself

import * as d3 from 'd3'
import attrs from './attrs'

d3.selection.prototype.attrs = attrs

I suspect during bundling the order of loading got messed up somehow... I rarely work with prototypes but this seems like a good method, generally, for patching es6 modules if all else fails.

Thank you very much mbostock!

@mbostock

This comment has been minimized.

Copy link
Member

@mbostock mbostock commented Oct 10, 2016

It’s probably not a code ordering issue, but an issue where the d3 module and d3-selection-multi each have their own copy of d3-selection, and so d3-selection-multi only decorates its internal copy of d3-selection that is never exposed. Your solution will workaround that issue, but it’d be more robust if you figure out how to configure Webpack to read the ES2015 source rather than the generated UMD bundle.

@lsowen

This comment has been minimized.

Copy link

@lsowen lsowen commented Feb 26, 2017

I had a similar issue with webpack 2.2.1. It actually looks like webpack was pulling in the right source for d3-selection-multi (the index.js file), but not for d3 itself (I believe because the d3 package.json file has a browser entry).

To fix this, I added a resolve alias to my webpack.config.js to change what was being imported from d3:

resolve: {
    alias: {
        'd3': 'd3/index.js'
    }
}

And then the import statements in my code just look like:

import * as d3 from "d3";
import "d3-selection-multi"; 
@jakeNiemiec

This comment has been minimized.

Copy link

@jakeNiemiec jakeNiemiec commented Sep 22, 2017

window.d3 = require('d3');
import { timelines } from 'd3-timelines';
// code

@lsowen I recently ran into an issue like this, this was the only way I could get it working. import * as d3 from "d3"; would not work with webpack.

See also: d3/d3#2733 (comment)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
4 participants
You can’t perform that action at this time.