d3.js d3使用函数添加多个类

g9icjywg 于 2022-11-12 发布在其他

关注(0)|答案(5)|浏览(256)

我有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条答案

只需用空格分隔元素名称，即可为元素指定多个类：

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

但是看起来你真正需要的是给你的元素分配一个data属性，对于这个属性，使用HTML5 data- attributes会更好。

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

然后获取用户名：

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

为什么要使用HTML5数据属性，复制title属性中已经存在的数据呢？2 HTML5数据属性确实很有用，但是复制数据并不是一件好事。
在没有重复数据得情况下执行此操作很容易，因为它与您最初得设想非常接近.

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

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

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

可能不能在非常旧的浏览器中工作tho。

Ilya的回答很好，但是如果你想在d3.select().classed()框内添加一个来自数据的类，最好的方法是使用attr来添加一个类：

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

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

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

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

可以使用D3将调用链接到classed。
这是一个有点重复，但你可以这样做：

const userCls = 'user'

d3.selectAll(`.${userCls}`)
      .classed(userCls  , true);
      .classed('Michael', true);

从我使用d3 7.6.1的测试来看，对classed的第二次调用不会覆盖第一次调用设置的类。