Search code examples
d3.jsnpmbrowserify

requiring d3 plugin with browserify

I am bringing sanity to a single page app with browserify. However, I am getting confused with bringing in d3 plugins. I have installed d3 and the lasso plugin thusly:

 npm install d3
 npm install d3-lasso

Then in my app I do

d3 = require('d3');
require('d3-lasso');

But then in my subsequent module:

function myModule() {
  var lasso = d3.lasso();
}

Produces this error:

 Uncaught TypeError: d3.lasso is not a function

I then tried:

d3 = require('d3');
d3.lasso = require('d3-lasso');

But that had the same outcome.

What is the proper way to do this?

EDIT:

The following idiom works:

d3 = require('d3');
d3.lasso=require('d3-lasso').lasso;

But seems a bit unwieldy. Is there a Better(tm) way to do this (and by better I mean 'more common' or 'more generalizable' or 'more consistent with how it is done by people who do this for a living')?

Solution

  • If you should want to use ES6 import, the syntax that worked for me was

    import * as d3 from 'd3';
import { lasso } from 'd3-lasso';
d3.lasso = lasso;