problem of using the d3-flextree in webpack

[geohuz]

I love the concept of variable size in the d3 tree layout, I'm trying to use it in a webpack environment. First I'm not sure if there is d3-flextree npm package and it seems like I couldn't run the npm install d3-flextree, then I tried to import the file directly, my first attempt is to import the dist/d3-flextree and I got d3 couldn't be found error, then I tried to import the /d3/d3.min.js, and I got another error: Uncaught TypeError: Cannot read property 'document' of undefined. Is there any way to use it in the webpack?

Thanks!

[Klortho]

I feel your pain! I'm actually just trying to reuse this in another project I just started, tree-chart, and hitting the same issues. I am not an expert in all these JS tools, but am working to try to figure them out.

First of all, d3-flextree is a plugin for D3, and before recently, I only ever worked in the browser environment, so it assumes everything external is in global scope. So, you have to have D3 in scope in order to use it. that's why you got the error with dist/d3-flextree. I think your best bet, if you just want it working fast, is to try that again, is to first get d3 working with webpack (if you haven't already), and then see if you can't insert d3-flextee into the same scope.

Please post back if you get it working, and I'll do the same.

[rueckstiess]

I'm having the same issue, too. I've got around this like so:

var d3 = window.d3 = require('d3');
require('d3-flextree');

Perhaps you could make the module a function that accepts the d3 object instead? Would be cleaner and not pollute the global namespace. And only check for global d3 if nothing was passed in, as a fallback to the previous behavior.

var d3 = require('d3');
require('d3-flextree')(d3);

Any plans to publish your plugin as an npm module?

[Klortho]

I went ahead and put it up. If I get a chance, I'll add your instructions to the README, or if you want to send me a PR, that would be good too. Mike Bostock has suggested I turn it into a D3 plugin. I haven't looked into it, but presumably that would address some of these problems.

[tomersela]

I also use webpack and d3. I got around this by using script-loader:

import d3 from 'd3';
import 'script!d3-flextree/dist/d3-flextree';

Then used D3.get(that).layout.flextree() in my module and it works.

[Radivarig]

This package works for me with webpack: https://github.com/neptunejs/d3-flextree-v4