有没有一种方法可以唯一地设置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>
我目前正在寻找有关如何动态更改迭代的资源。我这样做的原因是因为我需要控制每个元素的功能,例如更改颜色或更改宽度
您提供的第一个示例将不起作用-您无法在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] 删除。
我来说两句