求助：如何将D3示例代码重构为可用的Ember组件？

刚折腾完类似的需求，给你一步步梳理怎么把这段D3饼图代码改成能用的Ember组件，用ember-d3的话得注意它的模块化规范，还有Ember组件的生命周期，我给你拆解清楚：

ember-d3是基于ES模块拆分的，不能直接用全局d3对象，得按需导入你要用的功能。你原来的代码用到了选择器、饼图布局、弧生成器、颜色这些，所以在component.js顶部要加这些导入：

import Component from '@glimmer/component';
import { select } from 'd3-selection'; // 对应原来的d3.select
import { arc, pie } from 'd3-shape'; // 原来的d3.svg.arc和d3.layout.pie都在这里
import { scaleOrdinal } from 'd3-scale';
import { schemeCategory10 } from 'd3-scale-chromatic'; // 替代原来的color(i)颜色函数

别再用D3 v3那套d3.svg或者d3.layout的写法了，ember-d3用的是D3 v4+，API结构全变了，这也是你报语法错误的核心原因之一。

你已经能渲染组件模板了，那给svg加个did-insert钩子，确保DOM渲染完成后再执行D3代码——Ember组件初始化时DOM还没挂载，直接操作会找不到元素。模板可以写成这样：

<div class="pie-chart-wrapper">
  <svg class="pie-chart" {{did-insert this.drawChart}}></svg>
</div>

did-insert会把当前svg元素作为参数传给drawChart方法，刚好给D3用。

把原来的全局代码改成组件的类方法，用组件属性来管理配置和数据，避免全局变量污染，也符合Ember的组件设计：

export default class PieChartComponent extends Component {
  // 可以把宽高、半径做成可配置的，外部调用时能传参数
  get width() {
    return this.args.width || 400;
  }

  get height() {
    return this.args.height || 400;
  }

  get radius() {
    return Math.min(this.width, this.height) / 2;
  }

  // 颜色比例尺，替代原来的color(i)
  get colorScale() {
    return scaleOrdinal(schemeCategory10);
  }

  // 绘图方法，用箭头函数绑定this，避免指向错误
  drawChart = (svgElement) => {
    // 选中模板里的svg元素，设置宽高
    const svg = select(svgElement)
      .attr("width", this.width)
      .attr("height", this.height);

    // 创建中心分组，把绘图原点移到svg中心
    const vis = svg.append("g")
      .attr("transform", `translate(${this.radius}, ${this.radius})`);

    // 初始化弧生成器
    const arcGenerator = arc()
      .outerRadius(this.radius);

    // 初始化pie布局，指定取value字段作为数值
    const pieLayout = pie()
      .value(d => d.value);

    // 处理数据：用pie布局把原始数据转成饼图需要的格式
    // 这里假设数据是通过组件参数传入的，比如{{pie-chart data=myData}}
    const pieData = pieLayout(this.args.data);

    // 绘制切片分组
    const arcs = vis.selectAll("g.slice")
      .data(pieData)
      .enter()
      .append("g")
      .attr("class", "slice");

    // 绘制切片路径
    arcs.append("path")
      .attr("fill", (d, i) => this.colorScale(i))
      .attr("d", arcGenerator);

    // 绘制文本标签
    arcs.append("text")
      .attr("transform", d => {
        arcGenerator.innerRadius(0).outerRadius(this.radius);
        return `translate(${arcGenerator.centroid(d)})`;
      })
      .attr("text-anchor", "middle")
      .text((d, i) => this.args.data[i].label);
  }
}

你提到的“Unexpected Tokens”“保留字”问题，大概率是这几个原因：

• 直接用了全局d3对象，Ember的模块化环境不允许未导入的全局变量；
• 用了D3 v3的旧API（比如d3.svg.arc），ember-d3用的是v4+，这些API已经被拆分到子模块里了；
• 没有正确绑定this，比如用普通函数写drawChart，导致里面访问this.args时指向错误；
• 没等DOM渲染就操作元素，比如在init钩子里面绘图，这时候svg还没生成。

现在你可以在父模板里这样调用组件，传入数据和配置：

{{pie-chart 
  data=(array
    (hash label="A" value=30)
    (hash label="B" value=50)
    (hash label="C" value=20)
  ) 
  width=400 
  height=400
}}

这样就能正常渲染出饼图了，核心就是适配Ember的组件生命周期和模块化规范，同时把D3的旧API转换成v4+的写法。

内容的提问来源于stack exchange，提问作者Sorvah