Question

有没有办法在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>

我目前正在寻找有关如何动态更改迭代的资源。我这样做的原因是因为我需要控制每个元素的功能，如改变颜色或改变宽度

Answer 1

当您设置其他属性时，请添加以下内容：

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

Answer 2

您提供的第一个示例将无效 - 您无法在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的.filter() function来选择所需的元素。几乎在所有情况下，使用ID或类都会更容易。

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

2 个答案: