Javascript D3js中每个元素的唯一类或id

有没有一种方法可以唯一地设置D3js中元素的类或id

例如，我现在使用的是条形图，这些是条形矩形元素的外观

<g class="g" transform="translate(17,0)"></g>
<g class="g" transform="translate(34,0)"></g>
<g class="g" transform="translate(51,0)"></g>
...
<g class="g" transform="translate(850,0)"></g>
<g class="g" transform="translate(867,0)"></g>

...

我希望它们看起来像这样：

<g1 class="g" transform="translate(17,0)"></g>
<g2 class="g" transform="translate(34,0)"></g>
<g3 class="g" transform="translate(51,0)"></g>
...
<g50 class="g" transform="translate(850,0)"></g>
<g51 class="g" transform="translate(867,0)"></g>

...

或者类似于：

<g class="g1" transform="translate(17,0)"></g>
<g class="g2" transform="translate(34,0)"></g>
<g class="g3" transform="translate(51,0)"></g>
...
<g class="g50" transform="translate(850,0)"></g>
<g class="g51" transform="translate(867,0)"></g>

...

---

我目前正在寻找有关如何动态更改迭代的资源。之所以这样做，是因为我需要控制每个元素的功能，例如更改颜色或更改宽度。在设置其他属性时，请添加以下内容：

.attr("id", function(d,i) {return "Name" + i;})

---

您给出的第一个示例不起作用——您不能在SVG中更改元素本身的名称，因为它不知道如何解释它们。要设置类，可以执行以下操作

d3.selectAll("g")
  .attr("class", function(d, i) { return "g" + (i+1); });

或者在创建元素时使用相同的方法。或者，您可以按照另一个答案中指出的那样设置ID（这似乎更适合您所做的事情）：

d3.selectAll("g")
  .attr("id", function(d, i) { return "g" + (i+1); });

请注意，如果已将数据绑定到这些元素，还可以使用D3选择所需的元素。不过，在几乎所有情况下，使用ID或类都会更容易