我有SVG作为:
<g class="user" title="Michael" rel="tooltip" transform = "rotate(-12.364052661705784)translate(360)" style="fill: #9467bd; "></g>
我想添加一个和title一样的类。我试过了
d3.selectAll('.user').attr('class','Michael');
但它取代了原来的类。然后我试着
d3.selectAll('.user').classed('Michael',true);
它可以工作!但是现在我想用一个函数来返回类名,如
d3.selectAll('.user').classed(function(){return this.attr('title');},true);
它不工作。我怎么能做到这一点?
谢谢
5条答案
按热度按时间ecr0jaav1#
只需用空格分隔元素名称,即可为元素指定多个类:
但是看起来你真正需要的是给你的元素分配一个data属性,对于这个属性,使用HTML5 data- attributes会更好。
然后获取用户名:
afdcj2ne2#
为什么要使用HTML5数据属性,复制title属性中已经存在的数据呢?2 HTML5数据属性确实很有用,但是复制数据并不是一件好事。
在没有重复数据得情况下执行此操作很容易,因为它与您最初得设想非常接近.
8dtrkrch3#
如果你只想添加一个类,你可以跳出d3,使用类列表:
可能不能在非常旧的浏览器中工作tho。
aiqt4smr4#
Ilya的回答很好,但是如果你想在
d3.select().classed()
框内添加一个来自数据的类,最好的方法是使用attr
来添加一个类:然而,这将用那个类替换那个类,所以如果你想添加多个类,那么你必须在一行中完成。
这是有限的,因为你不能真正 * 追加 * 类,但我相信它也解决了OP的问题。
t5fffqht5#
可以使用D3将调用链接到
classed
。这是一个有点重复,但你可以这样做:
从我使用
d3 7.6.1
的测试来看,对classed的第二次调用不会覆盖第一次调用设置的类。