d3.js - Pie 不是 Ember D3 饼图中的函数

Question

我目前正在努力使用附加组件 ember-d3 安装的 D3 在 Ember 中创建饼图。 。为了创建图表，我正在使用 git here 上发布的一个很好的示例中的backwords。 .

使用我当前的代码，我在控制台中收到一条错误，指出“pie”不是函数。代码如下:

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); });

  },

});

据我所知，d3-shape 已正确导入，因为我没有收到有关“arc”的错误。如果我确实从导入语句中删除“arc”，我会收到一条错误消息，指出“arc”未定义。这表明模块正在正确导入。

形状模块也可以在不使用饼图功能的其他组件图表上正确导入。

我认为这表明存在语法错误，但我看不到。

模拟数据通过 Controller 和模板助手传递到组件:

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

{{pie-chart-example data=data dataIndex=dataIndex}}

Answer 1

您不能声明与导入同名的变量

工作版本:https://ember-twiddle.com/a658207aa8800816329f95b4e1b4860f?openFiles=components.pie-chart.js%2Ctemplates.components.pie-chart.hbs

创建不做太多事情的函数也会使代码更难理解，进而导致更多问题。