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>

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

拉尔斯·科特霍夫(Lars Kotthoff)

您提供的第一个示例将不起作用-您无法在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()功能来选择所需的元素。但是,在几乎所有情况下,使用ID或类都将变得更加容易。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章