javascript - 如何使用 d3 分类选择将名称作为函数

Question

我正在使用d3 分类选择，在第一个参数中，我想使用一个返回类名的函数，而不是字符串。

selection.classed(name[, value])

我知道我可以使用这里.attr()提到的方法来做同样的事情，但我希望能够使用分类来做同样的事情。

我怎样才能做到这一点？

Answer 1

您在那里提供的类名需要固定，即您不能拥有类似function(d) { return d; }. 如果需要类名由数据决定，则需要使用.attr("class", ...).

如果您担心覆盖现有的类名，请注意您可以按如下方式检索和添加这些名称。

.attr("class", function(d) { return d3.select(this).attr("class") + " " + d; })

Answer 2

我遇到了一个类似的问题，如果我的基准上的属性为真，我想添加一个类，如果属性为假，我想添加一个不同的类：

selection.classed('class-one', function(d) { return d.property; })
    .classed('class-two', function(d) { return d.property; });

如果您要添加的课程数量很少，那么可能值得考虑这样的事情。

Answer 3

类似于建议的答案，但我发现

selection.each(function(d) { d3.select(this).classed(d.class, true)

也有效。

Answer 4

Lars 的回答很好，但是如果您从属性上没有类开始，它会将类“null”添加到元素中，因为 null 属性被强制为字符串。他的下一步自然是：

.attr("class", function(d) {
      var existing = d3.select(this).attr("class") 
      if (existing == null){
        return d.column.class
      }else{
        return existing + " " + d.column.class
      }
})

如果您想要更简洁，可以将其制成带有三元运算符的单线