D3.js Jak zastosować wiele klas podczas korzystania z funkcji

Question

Obecnie używam D3.js i natknąłem się na problem, którego po prostu nie mogę rozwiązać.

Mam plik CSV, który ma kolumnę o nazwie "Ustaw" i kolumnę o nazwie "Rok". Chcę pobrać wartości z tych kolumn i użyć ich jako nazw klas. To jest to, co aktualnie mam ...

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

Działa to doskonale i nadaje każdemu punktowi danych nazwę klasy. Kiedy jednak spróbuję następujących rzeczy, nazwy klas "Set" są nadpisywane przez nazwy klas "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; 
       } 
      }); 

W jaki sposób można poprawić ten kod, aby dodać dodatkowe nazwy klas, a nie nadpisywać je.

Mam nadzieję, że ktoś może pomóc.

Answer 1

Po prostu potrzebujesz jednej funkcji, która nie robi obu rzeczy. Coś w tym stylu może ...

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

Answer 2

Istnieje alternatywne podejście, które może być przydatne. Można przypisać lub usunąć zajęcia z wykorzystaniem elementu selection.classed('class-name', true) lub 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; }); 

Wolę w ten sposób, ponieważ można usunąć klasy od elementu przy użyciu tej samej składni.

Answer 3

Można również użyć skrótu jako argument classed funkcję:

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