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

它不起作用。我怎樣才能做到這一點？

感謝

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數據屬性，複製的數據是已經存在的稱號屬性？ HTML5數據屬性確實很有用，但是複製數據並不是一件好事。

有一個簡單的做法，沒有數據重複，接近你原來的想法。

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