D3.js-Schlüsselfunktion wird zweimal bei einfacher Selektor-/Array-Kombination ausgeführt

Question

Ich lerne d3 und wenn ich ein einfaches Array von Zahlen erstelle, dann versuche, die Daten an eine einfache Gruppe von Elementen zu binden, aber die Schlüsselfunktion verwende, läuft sie zweimal durch die Schleife. Das erste Mal sagt es mir, dass die Werte des Arrays undefiniert sind. Beim zweiten Mal sind sie verfügbar.

Hier ist der HTML-Code:

Und hier ist der JavaScript-Code:

var numbers = [1, 2, 3];

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

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

Wenn ich das ausführe, erhalte ich:

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

Hier ist ein Fiddler: http://jsfiddle.net/5f8mo2sa/3/

Der Grund, warum dies ein Problem ist (abgesehen von wtf), liegt darin, dass wenn die Daten ein Array von Objekten sind und ich versuche, einen Schlüssel in der Funktion zu referenzieren, wirft es einen undefinierten Fehler.

Answer 1

Vom d3-Hilfe:

Eine Schlüsselfunktion kann angegeben werden, um zu steuern, wie Daten mit Elementen verbunden werden. Dies ersetzt das Standardverhalten nach Index; die Schlüsselfunktion wird einmal für jedes Element im neuen Datenarray aufgerufen und noch einmal für jedes vorhandene Element in der Auswahl. In beiden Fällen erhält die Schlüsselfunktion das Datumelement d und den Index i. Wenn die Schlüsselfunktion auf neuen Datenelementen ausgewertet wird, ist der this-Kontext das Datenarray; wenn die Schlüsselfunktion auf der vorhandenen Auswahl ausgewertet wird, ist der this-Kontext das zugehörige DOM-Element.

Was du im ersten Durchlauf siehst, ist das Durchgehen der vorhandenen Daten (von denen es keine gibt), dann geht es durch das neue Datenarray (das die Werte enthält, die du erwartest). Wenn deine Schlüsselfunktion von einem Objekt abhängt, musst du zuerst eine Überprüfung durchführen, um sicherzustellen, dass das Objekt existiert.