d3添加多个具有功能的类

Posted 2023-02-22

【中文标题】d3添加多个具有功能的类

【英文标题】：d3 add multiple classes with function

【发布时间】：2012-10-22 16:37:25

【问题描述】：

我的 svg 为：

<g class="user" title="Michael" rel="tooltip" transform = "rotate(-12.364052661705784)translate(360)" style="fill: #9467bd; "></g>

我想添加一个与标题相同的类。我试过了

d3.selectAll('.user').attr('class','Michael');

但它取代了原来的类。然后我尝试了

d3.selectAll('.user').classed('Michael',true);

有效！但现在我想用类似的函数返回类名

d3.selectAll('.user').classed(function()return this.attr('title');,true);

它不起作用。我该怎么做？

谢谢

【参考方案1】：

您可以通过简单地用空格分隔它们的名称来为元素分配多个类：

d3.selectAll(".user").attr("class", "user Michael");

但您似乎真正需要的是为您的元素分配一个数据属性，最好使用html5 data- attributes。所以你可以这样做：

d3.selectAll(".user").attr("data-name", function(d,i)  return "Michael #" + i; );

及以后获取用户名：

d3.select(".user").attr("data-name")

【讨论】：

顺便说一句，你也可以用.classed('user Michael', true)分配多个类：github.com/mbostock/d3/wiki/Selections

【参考方案2】：

为什么要使用 HTML5 数据属性，复制标题属性中已经存在的数据？ HTML5 数据属性固然有用，但复制数据不是一件好事。

这很容易做到，无需重复数据，与您最初的想法很接近。

d3.selectAll('.user').each(
    function()
        var elt = d3.select(this);
        elt.classed(elt.attr("title"), true);
    
) 

【讨论】：

这似乎是一个更好的答案，因为它实际上允许您使用一个函数来设置所要求的类。

【参考方案3】：

如果你只是想添加一个类，可以跳出d3，使用类列表：

d3.selectAll('.user').node().classList.add("mynewclass");

可能无法在非常旧的浏览器中运行。

【参考方案4】：

Ilya 的回答很好，但如果您想留在 d3.select().classed() 框内，从数据中添加类的最佳方法是使用 attr 添加类：

.attr('class', function (d)  return d.class )

但是，这将用那个类替换该类，所以如果你想添加多个类，那么你必须在一行中完成。

.attr('class', function (d)  return d.class + " " + d.otherclass)

这是有限的，因为你不能真正追加类，但我相信它也解决了 OP 的问题。