Funzione chiave D3.js in esecuzione due volte su semplice selettore/matrice combo

Question

Apprendimento di d3 e quando creo una semplice matrice di numeri, quindi tentare di associare i dati a un semplice insieme di elementi, ma utilizzare la funzione chiave, che attraversa il ciclo due volte. La prima volta, mi dice che i valori dell'array sono indefiniti. La seconda volta sono disponibili.

Ecco il codice html:

<div class="testBind"></div> 
<div class="testBind"></div> 
<div class="testBind"></div> 

Ed ecco il JS:

var numbers = [1, 2, 3]; 

function whichNumber(n){ 
    console.log('n----:' + n); 
    return n; 
} 

var testKeyFunction = d3.selectAll("div.testBind").data(numbers, whichNumber); 

Quando eseguo questo, ottengo:

n----:undefined 
n----:undefined 
n----:undefined 
n----:1 
n----:2 
n----:3 

Ecco un violinista: http://jsfiddle.net/5f8mo2sa/3/

Il rea figlio questo è un problema (a parte il wtf) è perché quando i dati sono una matrice di oggetti e provo a fare riferimento a una chiave nella funzione, lancia un errore indefinito.

Answer 1

Dalla aiuto d3:

Una funzione chiave può essere specificato per controllare come il dato è unito agli elementi. Questo sostituisce il comportamento predefinito per indice; la chiave function is invoked once for each element in the new data array, and once again for each existing element in the selection. In entrambi i casi la funzione chiave è passata il dato d e l'indice i. Quando la funzione chiave viene valutata su nuovi elementi di dati, il contesto è l'array di dati; quando la funzione chiave viene valutata sulla selezione esistente, il contesto è l'elemento DOM associato.

Quello che state vedendo nel primo ciclo sta attraversando i dati esistenti (che non v'è nessuno), poi si passa attraverso il nuovo array di dati (che ha i valori che ci si aspetta). Se la funzione chiave dipende da un oggetto, è necessario prima eseguire un controllo per assicurarsi che l'oggetto esista.