javascript - d3添加多个具有功能的类

Question

我的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);

它不起作用。我怎样才能做到这一点？

谢谢

score 86 · Accepted Answer

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

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

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

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

稍后获取用户名：

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

score 9 · Accepted Answer

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

在没有数据重复的情况下很容易做到这一点，与您最初的想法很接近。

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

score 5 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

但是，这将用该类替换该类，因此如果要添加多个类，则必须在一行中完成。

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

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

4 回答 4