Come posso usare la selezione classificata d3 per avere il nome come funzione

Question

Sto usando d3 classed selection e Nel primo parametro, invece di String, voglio usare una funzione che restituirà il nome della classe.

selection.classed(name[, value]) 

ho capito che posso fare lo stesso utilizzando attr come detto here, ma voglio essere in grado di fare lo stesso utilizzando classificato. Come posso fare questo?

Answer 1

Il nome della classe specificato deve essere corretto, ovvero non è possibile avere qualcosa come function(d) { return d; }. Se è necessario che il nome della classe sia determinato dai dati, è necessario utilizzare .attr("class", ...).

Se si è preoccupati di sovrascrivere nomi di classi esistenti, si noti che è possibile recuperarli e aggiungerli come segue.

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

Answer 2

ho incontrato un problema simile in cui ho voluto aggiungere una classe se una proprietà sul mio riferimento era vero e una classe diversa se la proprietà era falso:

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

Se si dispone di un piccolo il numero di classi da aggiungere quindi qualcosa del genere potrebbe valere la pena di essere preso in considerazione.

Answer 3

Simile alla risposta suggerita, ma ho trovato

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

funziona anche.

Answer 4

La risposta di Lars è ottima, ma se si avvia senza alcuna classe sull'attributo, si aggiungerà la classe "null" all'elemento mentre l'attributo null viene forzato a una stringa. naturale passo successivo dal suo:

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

Questo potrebbe essere fatto in un one-liner con un operatore ternario, se lo vuoi più concisa