D3.js：添加名称基于数据的类 [英] D3.js: Adding class whose name is based on data

问题描述

D3有两种设置类的方法：

  selection.attr（class，（d）=> d.isFoo？foo：）; 
 selection.classed（foo，（d）=> d.isFoo）
  

我正在寻找一种方法来添加一个按照数据命名的类。即类似于：

  selection.classed（（d）=>node+ d.id，true）; 
  

• 我不想使用 id 因为多个DOM元素将共享该类。


• 我不想使用 attr 因为它可能会覆盖已经存在的其他类。

所以我可以做到

  selection.attr（class，（d）=> d3.select（this）.attr（class）+node+ d.id）; 
  

感觉有点ha ..

更好的解决方案？或正在进行的功能？

解决方案

虽然Gerardo的答案是正确的，并附带一个正确的解释，我认为，弄乱元素类的最简单方法是求助于 classList 属性，它继承自 元素 界面。

Element.classList 是一个读取只返回实时 DOMTokenList 元素的类属性的集合。




虽然属性本身是只读的，但它提供方法，用于添加，删除和切换类。调用 .add（）将自动处理先前设置的类，并检查要添加的类是否已分配给元素：

add（String [，String]）

添加指定的类值。如果这些类已存在于元素的属性中，则忽略它们。

因此可以使用基于数据添加类来完成 selection.each（）：

  divs.each（function（d） ）{
 this.classList.add（node+ d.name）; 
}）; 
  

在 .each（）方法此指向实际元素，可用于直接访问 classList 属性。

  var data = [{name：foo}，{name：bar}，{name： baz}]; var body = d3.select（body）; var divs = body.selectAll（myDivs）。data（data）.enter（）。append（div）。attr（class ，someClass）; divs.each（function（d）{this.classList.add（node+ d.name）;}）; //记录类，你可以看到前面的类（someClass ）没有被覆盖：divs.each（function（）{console.log（d3.select（this）.attr（class））}） 

 < script src =https://d3js.org/d3.v4.min.js>< / script>  

D3 has 2 ways of setting a class:

selection.attr("class", (d) => d.isFoo ? "foo" : "");
selection.classed("foo", (d) => d.isFoo)

I'm looking for a way to add a class named as per the data. I.e. something like:

selection.classed((d) => "node" + d.id, true);

• I don't want to use id because multiple DOM elements will share that class.
• I don't want to use attr because it may potentially overwrite other classes already there.

So I could do

selection.attr("class", (d) => d3.select(this).attr("class") + " node" + d.id);

which feels a bit hackish.

Any better solution? Or a feature underway?

解决方案

Although Gerardo's answer is correct and comes with a proper explanation, I think, the easiest way to mess with an element's classes is to resort to its classList property which it inherits from the Element interface.

The Element.classList is a read-only property which returns a live DOMTokenList collection of the class attributes of the element.

Although the property itself is read-only, it provides methods for adding, removing and toggling classes. Calling .add() will automatically take care of classes previously set and check if the class to add has already been assigned to the element:

add( String [, String] )

Add specified class values. If these classes already exist in attribute of the element, then they are ignored.

Adding a class based on data can thus be done using selection.each():

divs.each(function(d) {
  this.classList.add("node" + d.name);
});

Within the .each() method this points to the actual element and can be used to directly access the classList property.

var data = [{name: "foo"}, 
            {name: "bar"},
            {name: "baz"}];

var body = d3.select("body");

var divs = body.selectAll("myDivs")
    .data(data)
    .enter()
    .append("div")
      .attr("class", "someClass");

divs.each(function(d) {
  this.classList.add("node" + d.name);
});

//log the classes, you can see the previous class ("someClass") was not overwritten:
divs.each(function() {
    console.log(d3.select(this).attr("class"))
})

<script src="https://d3js.org/d3.v4.min.js"></script>

这篇关于D3.js：添加名称基于数据的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！