d3 aggiunta attributo di dati in modo condizionale

Question

Sto creando una tabella con d3 per essere utilizzata dallo FooTable jquery plugin e ciò richiede di avere alcuni attributi di dati nella riga di intestazione. Ma non tutte le colonne hanno tutti gli attributi dei dati e si chiedono se c'è un modo per farlo.

Questo tipo di approccio funziona, aggiungendo tutti gli attributi possibili dei dati e lasciando alcuni vuoti, ma sono sicuro che non è una buona pratica.

var th = d3.select(selection).select("thead").selectAll("th") 
      .data(colspec) 
      .enter().append("th") 
      .text(function(d) { return d["data-name"]; }) 
      .attr("data-class", function(d) { 
       if ("data-class" in d) { 
        return d["data-class"]; 
       } else { 
        return ""; 
       } 
      }) 
      .attr("data-hide", function(d) { 
       if ("data-hide" in d) { 
        return d["data-hide"]; 
       } else { 
        return ""; 
       } 
      }) 
      .attr("data-ignore", function(d) { 
       if ("data-ignore" in d) { 
        return d["data-ignore"]; 
       } else { 
        return ""; 
       } 
      }) 

     etc. 

esempio colspec:

[{"data-name": "username"}, {"data-name": "Date Joined", "data-hide": "true"}] 

Attualmente ottenere:

<th data-class="" data-hide="true" data-ignore="" data-type="">Joined</th> 

Vuoi

<th data-hide="true" >Joined</th> 

Qualche suggerimento?

Answer 1

sembra un buon candidato per .each():

var th = d3.select(selection).select("thead").selectAll("th") 
     .data(colspec) 
    .enter().append("th") 
     .text(function(d) { return d["data-name"]; }) 
     // now address each item individually 
     .each(function(d) { 
      var header = d3.select(this); 
      // loop through the keys - this assumes no extra data 
      d3.keys(d).forEach(function(key) { 
       if (key != "data-name") 
        header.attr(key, d[key]); 
      }); 
     }); 

Io uso spesso .each quando avere un per-oggetto ambito ha più senso che cercare di capire un po 'di attributi per ogni elemento.

Per un breve elenco di attributi, soprattutto se siete preoccupati per i dati aggiuntivi negli oggetti, è probabilmente più facile per scorrere i tasti desiderati invece di tutto ciò:

 .each(function(d) { 
      var header = d3.select(this); 
      ['data-class', 'data-hide', 'data-ignore'].forEach(function(key) { 
       if (key in d) 
        header.attr(key, d[key]); 
      }); 
     }); 

Answer 2

È possibile utilizzare la funzione .filter() per operare solo sul sottoinsieme della selezione per cui è necessario impostare gli attributi, ad es.

var th = d3.select(selection).select("thead").selectAll("th") 
     .data(colspec) 
     .enter().append("th") 
     .text(function(d) { return d["data-name"]; }); 
th.filter(function(d) { return ("data-class" in d); }) 
     .attr("data-class", function(d) { 
      return d["data-class"]; 
     }); 

Answer 3

Non è necessario chiama each() o filter() ... La funzione attr() lo farà internamente. Basta chiamare con una funzione invece di un valore, e che hanno la funzione restituisce il valore desiderato per ogni dato, o null se l'attributo non è desiderato per un particolare dato, in questo modo:

... 
.attr('data-class', function(d) { 
    return 'data-class' in d ? d['data-class'] : null; 
}); 

Se le vostre dichiarazioni di funzione null, l'attributo non è stato aggiunto. È anche possibile combinare diversi attributi in una sola chiamata, fornendo una mappa di nomi attr alle funzioni in questo modo:

... 
.attr({ 
    'data-class': function(d) { 
     return 'data-class' in d ? d['data-class'] : null; 
    }, 
    'data-hide': function(d) { 
     return 'data-hide' in d ? d['data-hide'] : null; 
    }, 
    'data-ignore': function(d) { 
     return 'data-ignore' in d ? d['data-ignore'] : null; 
    } 
}); 

o se siete come me e preferisce non scrivere così tanto, è possibile ridurre l'elenco dei attributi nomi nella mappa appropriata:

... 
.attr(['data-class', 'data-hide', 'data-ignore'].reduce(function(result, attr) { 
    result[attr] = function(d) { 
     return attr in d ? d[attr] : null; 
    } 
    return result; 
}, {}));