D3.js Как применять несколько классов при использовании функции

В настоящее время я использую D3.js и столкнулся с проблемой, которую я просто не могу решить.

У меня есть 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";
                }
            });

Это отлично работает и дает каждой точке данных имя класса. Однако, когда я пытаюсь выполнить следующее, имена классов "Set" надписью записываются именами классов "Год".

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

Как этот код может быть исправлен так, что он добавляет дополнительные имена классов, а не переписывает их.

Надеюсь, кто-то может помочь.

Ответ 1

Вам просто нужна одна функция, которая делает обе вещи, а не вы. Что-то в этом роде возможно...

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

Ответ 2

Существует альтернативный подход, который может быть полезен. Вы можете назначать или удалять классы из элемента с помощью 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; });

Я предпочитаю этот путь, потому что вы можете удалить классы из элемента, используя тот же синтаксис.

Ответ 3

Обновить

Кажется, этот подход больше не приемлем для D3.js v5+

Оригинальный ответ

Вы также можете использовать хеш в качестве аргумента 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; }
  });