Erstellen von Elementen für Datenlisten in d3

Question

Ich versuche, einem Datenlistenelement Optionselemente hinzuzufügen, indem Einträge aus einer CSV-Datei in D3 gefüllt werden. Soweit ich weiß, habe ich meinen Datenlogger ausgewählt, den csv mit den Einträgen aus der Spalte NAME geladen, meine Daten verknüpft und sollte den Datenlistener mit Optionen mit dem Wert für die Daten anhängen. Ich bin nicht ganz sicher, warum Elemente nicht gemacht werden, und ich nehme an, es hat damit zu tun, wie meine Daten gehandhabt werden.

d3.select("datalist") 
.data(d3.csv("Input/domain_data.csv").row(function(d){return d.NAME})) 
.enter() 
.append("option") 
.attr("value", function(d){return d}) 

Answer 1

Zu allererst d3.csv ist asynchron, können Sie einen Rückruf müssen Setup Sinn und warten für die Antwort zu gelangen. Zweitens müssen Sie data für eine Auswahl von <option> s aufrufen, d. H .: selectAll('option'), um an sie anhängen zu können.

// Start off by doing an HTTP request to a server: 
d3.csv('path/to/file.csv') 
    .row(function (d) { return d.NAME }) 
    .get(function (error, rows) { 
    // The response from the server has arrived (maybe check for errors too?). 
    // Let's create an empty selection of options inside a datalist: 
    d3.select('datalist').selectAll('option') 
     .data(rows) // performing a data join 
     .enter() // extracting the entering selection 
     .append('option') // adding an option to the selection of options 
     .attr('value', function (d) { return d; }); // add attribute 
    });