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'的错误。如果我从import语句中删除'arc'，我收到一个错误，说'arc'没有定义。这表明模块正确导入。

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

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

模拟数据通过控制器和模板助手传递给组件：

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

创建不做太多的功能也会使代码更难理解，从而导致更多问题。

馅饼不是Ember D3饼图中的功能

1 个答案: