Pie is not a function in Ember D3 Pie Chart

I am currently struggling to create a pie chart in Ember using D3 as installed by the add-on ember-d3. To create the chart I am working backwords from a great example posted on git here.

With my current code I receiving an error in the console that 'pie' is not a function. The code is as follows:

import Ember from 'ember';
import Component from 'ember-component';
import {arc, pie} from 'd3-shape';
import { select } from 'd3-selection';
import { scaleOrdinal } from 'd3-scale';


export default Component.extend({

  radius() {
    let width = this.get('width'),
        height = this.get('height');

    return Math.min(width, height) / 2;
  },
  color() {
    return scaleOrdinal().range(['#A60F2B', '#648C85', '#B3F2C9', '#528C18', '#C3F25C'])
  },
  arc() {
    let radius = this.radius();
    return arc().outerRadius(radius - 10).innerRadius(0);
  },
  labelArc() {
    let radius = this.radius();
    return arc().outerRadius(radius - 40).innerRadius(radius - 40);
  },

  didInsertElement() {
    let data = this.get('data');
    this.pieChart(data);
  },

  pieChart(dataIn, dataIndexIn) {
    let width = this.get('width'),
        height = this.get('height'),
        arc = this.arc(),
        labelArc = this.labelArc(),
        color = this.color(),
        that = this;

    let data = dataIn;

    let pie = pie()
          .value(function(d) { return d.count; })(data[dataIndexIn]);

    let svg = select("#pie-chart")
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(" + width/2 + ", " + height/2 + ")");

    let g = svg.selectAll("arc")
          .data(pie)
          .enter().append("g")
          .attr("class", "arc");

    g.append("path")
        .attr("d", arc)
        .style("fill", function(d, i) { return color(i); })
        .style("stroke", "#222")
        .each(function(d) { this._current = d; that.set('chartContext', this._current); });

    //Labels
    g.append("text")
        .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
        .text(function(d) { return d.data.color; })
        .attr("text-anchor", "middle")
        .style("fill", "#FFF")
        .each(function(d) { this._current = d; that.set('chartContextLable', this._current); });

  },

});

As far as I can tell d3-shape is being imported correctly as I do not receive an error about 'arc'. If I do remove 'arc' from the import statement I receive an error to say that 'arc' is not defined. This suggests the module is importing correctly.

The shape module also imports correctly on other component charts that do not use the pie function.

I think this suggests a syntax error but I can't see one.

Mock data is passed to the component via the controller and template helper:

data: [
  { label: 'Abulia', count: 10 },
  { label: 'Betelgeuse', count: 20 },
  { label: 'Cantaloupe', count: 30 },
  { label: 'Dijkstra', count: 40 }
],