如何使用D3基于数组的数组创建多个对象？

你需要利用D3的嵌套选择逻辑，绑定每个.node节点自身存储的asignaturas数组数据，而不是直接调用原始数据源。核心问题出在你没有关联父节点（.node）的绑定数据，而是直接平铺了所有学科数组，导致子元素无法对应到正确的课程节点。

具体实现步骤如下：

1. 选中所有已创建的.node节点，针对每个节点选择要插入的圆形（初始为空，用selectAll("circle")作为占位）：

// 选中所有.node节点，处理每个节点的子学科数据
const asignaturaCircles = d3.selectAll(".node")
  .selectAll("circle")
  // 这里的d是当前.node节点绑定的课程数据，直接取它的asignaturas数组
  .data(d => d.asignaturas);

2. 为新增的学科数据创建圆形并设置基础属性：

// 为每个学科数据添加圆形元素
asignaturaCircles.enter()
  .append("circle")
  .attr("r", 6) // 圆形半径
  .attr("cx", (d, index) => 25 * index) // 按学科索引设置横向位置，可自定义
  .attr("cy", 0) // 纵向位置，可根据父节点位置调整
  .attr("fill", "#2ecc71");

额外说明 #

• 如果你的.node是通过D3的enter流程创建的（比如enterNodes.append("g").attr("class", "node")），那么每个.node元素已经绑定了对应的课程对象数据，直接通过d => d.asignaturas就能拿到该课程下的所有学科数组。
• 如果需要支持数据更新或清理旧元素，可以补充merge和exit逻辑：

// 合并新增与现有元素，统一更新属性
asignaturaCircles.enter()
  .append("circle")
  .merge(asignaturaCircles)
  .attr("r", 6)
  .attr("cx", (d, index) => 25 * index)
  .attr("cy", 0)
  .attr("fill", "#2ecc71");

// 移除不再需要的圆形
asignaturaCircles.exit().remove();

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