D3.js力导向图：为何无法通过ID选择节点追加Arc？

哈哈，这问题很典型！你之所以通过ID选择节点追加Arc没效果，核心原因是CSS ID选择器的语法用错了。

问题出在哪？ #

D3的select()方法完全遵循CSS选择器规则，要选中带ID的元素，必须在ID名称前加#符号。你原来的代码里：

var result = d3.select("name_"+d.id)
  .append("path")
  // ...其他属性

这里的"name_"+d.id没有加#，相当于在找标签名为name_XXX的元素（比如<name_123>这种不存在的标签），自然选不到你目标的节点元素。虽然你能打印result，但这个对象其实是一个空的D3选择集，对空选择集执行append()不会在DOM里生成任何元素。

修正后的代码 #

只需要给ID选择器加上#就行：

var arc = d3.arc()
  .innerRadius(13)
  .outerRadius(43)
  .startAngle(0)
  .endAngle(2 * Math.PI);

var result = d3.select("#name_"+d.id) // 这里添加#号
  .append("path")
  .attr("d", arc)
  .attr("fill", "lightgrey")
  .attr("transform", "translate(" + d.x + "," + d.y + ")");

额外注意点 #

还要确认你的节点元素确实设置了正确的ID属性，比如当初创建节点的时候有没有写：

d3.select(".nodes")
  .selectAll("circle") // 假设你的节点是circle元素
  .data(data)
  .enter()
  .append("circle")
  .attr("id", function(d) { return "name_" + d.id; }) // 必须设置对应ID
  // ...其他节点属性

如果节点本身没有id="name_XXX"这个属性，那就算加了#也选不到哦。

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