如何在D3.js中通过数据集在饼图上显示图片？

核心问题修正 #

• 数据定义错误：你误将数据集写成了函数调用格式，应直接定义为数组（注意wins建议用数字类型，方便饼图计算占比）：

  var data = [{"name": "avalanche", "wins": 2, "logo": "https://archives.bulbagarden.net/media/upload/4/4a/0025Pikachu.png" }];
  

• 图片绑定与取值逻辑错误：

  1. 不能只生成单个<image>元素，需对应每个饼图楔形绑定数据，生成对应图片；
  2. 获取logo地址时，应直接访问数据对象的logo属性，而非调用playoffWins(d)；
  3. 需通过饼图布局的centroid方法计算每个楔形的中心坐标，再调整图片位置使其居中。

修正后核心代码示例 #

// 定义饼图布局与弧生成器
var pie = d3.pie().value(d => d.wins);
var arc = d3.arc().innerRadius(50).outerRadius(150);

// 绑定饼图数据，生成分组容器
var arcs = svg.selectAll("g.arc")
              .data(pie(data))
              .enter()
              .append("g")
              .attr("class", "arc")
              .attr("transform", "translate(200,200)"); // 设置饼图中心偏移位置

// （可选）绘制饼图楔形，若已有此部分可跳过
arcs.append("path")
    .attr("d", arc);

// 添加队徽图片
arcs.append("image")
    .attr("href", d => d.data.logo) // D3 v5+版本用href，旧版本可改用xlink:href
    .attr("width", 50)
    .attr("height", 50)
    .attr("x", d => arc.centroid(d)[0] - 25) // 减去宽度一半，让图片居中
    .attr("y", d => arc.centroid(d)[1] - 25); // 减去高度一半，让图片居中

额外注意事项 #

• 确保图片URL可正常访问，若遇到跨域问题，需配置服务器CORS或使用同域图片；
• 根据饼图的内外半径，调整图片宽高，保证图片适配楔形区域；
• 确认D3版本兼容性：v5及以后版本不再使用xlink:href属性，直接用href即可。

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