Html D3.js 如何在使用函数时应用多个类

D3.js How to apply multiple classes when using a function

提问by Dally

I'm currently using D3.js and have come across a problem that I just can't seem to solve.

我目前正在使用 D3.js，但遇到了一个我似乎无法解决的问题。

I have a CSV that has a column named "Set" and a column named "Year". I want to pull the values from these columns and use them as class names. This is what I currently have...

我有一个 CSV，其中有一个名为“Set”的列和一个名为“Year”的列。我想从这些列中提取值并将它们用作类名。这是我目前所拥有的...

var circle = svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("class", function(d) {
                if (d["Set"] == 1)
                {
                    return "set-1";
                }
                if (d["Set"] == 2)
                {
                    return "set-2";
                }
            });

This works perfectly fine and gives each data-point a class name. When I try the following however, the "Set" class names are over written by the "Year" class names.

这工作得很好，并为每个数据点提供了一个类名。然而，当我尝试以下操作时，“Set”类名被“Year”类名覆盖。

var circle = svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("class", function(d) {
                if (d["Set"] == 1)
                {
                    return "set-1";
                }
                if (d["Set"] == 2)
                {
                    return "set-2";
                }
            .attr("class", function(d) {
                if (d["Year"] == 2012)
                {
                    return "2012";
                }
                if (d["Year"] == 2013)
                {
                    return "2013;
                }
            });

How can this code be rectified so that it adds on additional class names as opposed to over-writing them.

如何修正这段代码，以便添加额外的类名而不是覆盖它们。

Hope someone can help.

希望有人能帮忙。

采纳答案by Robert Longson

You just want a single function that does both things don't you. Something along these lines perhaps...

您只需要一个可以同时完成这两件事的函数，不是。沿着这些路线的东西也许......

var circle = svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", function(d) {
            var c = "";
            if (d["Set"] == 1)
            {
                c = "set-1";
            }
            if (d["Set"] == 2)
            {
                c = "set-2";
            }
            if (d["Year"] == 2012)
            {
                c += " 2012";
            }
            if (d["Year"] == 2013)
            {
                c += " 2013;
            }
            return c;
        });

回答by Pablo Navarro

There is an alternative approach that can be useful. You can assign or remove classes from an element using selection.classed('class-name', true)or selection.classed('class-name', false):

有一种替代方法可能很有用。您可以使用selection.classed('class-name', true)或为元素分配或删除类selection.classed('class-name', false)：

var circle = svg.selectAll("circle")
    .data(data)
    .enter()
    .append('circle')
    .classed('2012', function(d) { return d['Year'] === 2012; })
    .classed('2013', function(d) { return d['Year'] === 2013; })
    .classed('set-1', function(d) { return d['Set'] === 1; })
    .classed('set-2', function(d) { return d['Set'] === 2; });

I prefer this way because you can remove the classes from an element using the same syntax.

我更喜欢这种方式，因为您可以使用相同的语法从元素中删除类。

回答by Ivan Black

Update

更新

Seems, this approach no longer acceptable for D3.js v5+

似乎，这种方法不再适用于 D3.js v5+

Original answer

原答案

You can also use a hash as argument of classedfunction:

您还可以使用哈希作为函数的classed参数：

var circle = svg.selectAll("circle")
  .data(data)
  .enter()
  .append('circle')
  .classed({
    '2012': function(d) { return d['Year'] === 2012; },
    '2013': function(d) { return d['Year'] === 2013; },
    'set-1': function(d) { return d['Set'] === 1; },
    'set-2': function(d) { return d['Set'] === 2; }
  });