d3用函数添加多个类

Question

我有svg as：

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

它不起作用。我怎么能这样做？

由于

Answer 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")

Answer 2

为什么要使用HTML5数据属性，复制title属性中已存在的数据？ HTML5数据属性肯定是有用的，但重复数据不是一件好事。

在没有数据重复的情况下很容易做到这一点，与你原本想到的很接近。

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

Answer 3

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

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

在旧版浏览器中可能无法使用。