如何在D3中根据数据值为每个数据元素创建多个元素？

没问题，这个需求其实很好实现，核心思路就是先把你的原始数据做一次展开处理，让每个数据对象根据num属性的值重复对应次数，然后再用D3绑定这个展开后的数组，就能生成你想要的div数量了。

步骤1：展开原始数据 #

首先我们需要把原始数组转换成一个“平铺”的数组——每个原始对象会被复制num次，这样新数组的长度正好等于所有num值的总和（4+3+2+5=14）。这里用ES6的flatMap方法最简洁：

const data = [ 
  {num: 4, category: 'A'}, 
  {num: 3, category: 'B'}, 
  {num: 2, category: 'D'}, 
  {num: 5, category: 'A'} 
];

// 展开数据，每个对象根据num重复对应次数
const expandedData = data.flatMap(item => 
  Array.from({ length: item.num }, () => ({ ...item }))
);

如果你的环境对ES6语法支持有限，也可以用reduce方法实现同样的效果：

const expandedData = data.reduce((result, item) => {
  for (let i = 0; i < item.num; i++) {
    result.push({ ...item }); // 复制原对象，避免引用共享
  }
  return result;
}, []);

步骤2：用D3生成对应数量的div #

接下来就可以用D3的标准数据绑定流程，基于展开后的数组来生成div了。这里我还加入了根据category给div添加类名的逻辑，方便你后续做样式区分：

// 选择目标容器（这里用body，你可以换成自己的容器选择器，比如#container）
d3.select('body')
  .selectAll('div')
  .data(expandedData) // 绑定展开后的数据
  .enter() // 针对新数据创建元素
  .append('div')
  .attr('class', d => `category-${d.category}`) // 给div添加分类类名
  .text(d => `${d.category}`); // 可选：给div添加文本内容

关键说明 #

• 为什么要展开数据？因为D3的data()方法是一对一绑定数组元素和DOM元素的——数组里有多少个元素，就会对应生成多少个DOM元素。所以我们必须先把数据转换成和目标DOM数量一致的数组。
• 为什么要复制原对象（{...item}）？这是为了避免所有重复的元素都引用同一个原始对象，虽然这个场景下可能不会有问题，但养成复制对象的习惯可以避免后续修改数据时出现意外的副作用。

这样处理后，你就能得到4个A类div、3个B类div、2个D类div和5个A类div，总共14个div啦。

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