d3.select 无法正常工作？C3图表元素属性修改问题求助

嘿，你遇到的问题其实是D3的select方法特性导致的——d3.select()只会返回匹配选择器的第一个DOM元素，所以你调用两次也都是在操作同一个元素，另一个标题自然没被修改到。

正确的处理方式 #

要同时选中两个text.c3-chart-arcs-title元素，你需要用d3.selectAll()，它会返回所有匹配的元素集合，之后可以通过遍历或者索引来分别处理每个元素：

方法1：遍历所有匹配元素

如果你的name是一个包含两个对应值的数组（比如const name = ["total", "average"]），可以用.each()遍历每个元素：

// 先获取所有匹配的标题元素
const titles = d3.selectAll("text.c3-chart-arcs-title");

// 遍历每个元素，根据索引对应不同的name值
titles.each(function(d, index) {
  // 用d3.select(this)获取当前遍历到的元素
  d3.select(this)
    .attr("id", "title" + name[index])
    // 这里可以继续添加其他属性修改，比如.style()或者.text()
});

方法2：按索引单独处理

如果你需要分别对两个元素做不同的操作，也可以直接通过索引获取单个元素：

const titles = d3.selectAll("text.c3-chart-arcs-title");

// 获取第一个元素并修改
d3.select(titles.nodes()[0])
  .attr("id", "title" + name[0]);

// 获取第二个元素并修改
d3.select(titles.nodes()[1])
  .attr("id", "title" + name[1]);

额外注意：确保元素已渲染完成 #

C3图表是异步渲染的，如果你的D3代码执行时机太早（比如图表还没画完），可能会出现选不到元素的情况。这种情况下，把修改代码放在C3的onrendered回调里：

const chart = c3.generate({
  // 你的图表配置项（数据、类型等）
  data: {
    columns: [
      // 数据内容
    ],
    type: 'donut' // 假设是环形图，对应arcs标题
  },
  // 图表渲染完成后执行回调
  onrendered: function() {
    const titles = d3.selectAll("text.c3-chart-arcs-title");
    titles.each(function(d, index) {
      d3.select(this).attr("id", "title" + name[index]);
    });
  }
});

这样就能确保在元素已经存在于DOM中时再执行修改操作啦～

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