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

Question

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

使用我当前的代码，我在控制台中收到“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”未定义。这表明模块正在正确导入。

shape 模块还可以在不使用饼图函数的其他组件图表上正确导入。

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

模拟数据通过 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

创建没有太多作用的函数也会使代码更难理解，这反过来又会导致更多问题。