Use with ES6 (webpack/babel)

[ViggoV]

Hi there.

I can't seem to get this to work work in my simple webpack/babel setup, no matter what I do. I've tried importing the following ways:

import 'd3-transform';
import d3Transform from 'd3-transform';
import * as d3Transform from 'd3-transform';
// and
var d3Transform = require('d3-transform');

But in all cases I get an Uncaught TypeError: [x] is not a function where [x] is whichever d3-transfom function I am trying to invoke. I have tried using both d3.transform() and d3Transform() but without any luck.

I'm sorry if I haven't provided enough detailed information, but at this point I am not quite sure where to begin.

Thanks on beforehand :)

[trinary]

I'll see if I can reproduce this, thanks for the heads up.

[moonthug]

You can use d3-transform like this:

import * as d3 from 'd3';
import { transform } from 'd3-transform';

let circles = svg.selectAll('circle')
  .attr('transform', transform()
    .translate(function(d) { return [20, d.size * 10] })
    .rotate(40)
    .scale(function(d) { return d.size + 2 }
  );

or as per the example styling

import * as d3 from 'd3';
import { transform } from 'd3-transform';

let circleTransform = transform()
    .translate(function(d) { return [20, d.size * 10] })
    .rotate(40)
    .scale(function(d) { return d.size + 2 });

let circles = svg.selectAll('circle')
  .attr('transform', circleTransform);

[trinary]

Thanks for the help @moonthug, I dropped the ball on validating this. :)

[Munter]

I'm trying import { transform } from 'd3-transform'; in my current webpack ksetup and all I get is undefined