Zeichne X-Diagramme mit einem Array von X-Dateien + Grafiktitel mit Elementen in Array hinzufügen + d3

Question

Dies ist my fiddle, die ich auf diesem example aufbauen werde.

Und jetzt habe ich diese fiddle wo es ein Array verwendet 1 Diagramm in dem Array pro jedes Element zu zeichnen

arr = ["https://dl.dropboxusercontent.com/u/49714666/data.tsv", "https://dl.dropboxusercontent.com/u/49714666/data2.tsv"] 

for (this_file in arr) { 

    d3.tsv(arr[this_file], type, function(error, data) { 
    if (error) throw error; 

    //draw chart code 

    //add a graph title 
    svg.append("text") 
     .attr("x", (width/2)) 
     .attr("y", 0 - (margin.top/2)) 
     .attr("text-anchor", "middle") 
     .style("font-size", "12px") 
     //.style("text-decoration", "underline") 
     .text(arr[this_file] + " - 1"); 


    }); 

} 

Aber die Art und Weise dies funktioniert, ist, dass jeder Diagrammtitel in den Namen aus dem zweiten Namen hat das Array. Was ich will, ist der 1. Elmenname, der Titel von Chart 1 und das 2. Element, das der Titel von Chart 2 sein soll ... Wie kann das gemacht werden? Oder habe ich hier ein kleines Missverständnis?

Meine aktuelle Problemumgehung ist eine var=ii zu verwenden, um dies zu arbeiten. Hier ist die fiddle, aber ich frage mich nur, gibt es einen besseren Weg, oder vielleicht muss ich es umschreiben?

Answer 1

Vermeiden Sie Ihre Problemumgehung! Eine global-ish-Variable ii modifiziert als Nebeneffekt einer Render-Aktion (das ii++ Bit) ist unklar und kann große Zeit nach hinten losgehen. Versuche das:

var arr = ["https://dl.dropboxusercontent.com/u/49714666/data.tsv", "https://dl.dropboxusercontent.com/u/49714666/data2.tsv"] 

for (var this_file in arr) { 
    // "createDataHandler" is declared below 
    d3.tsv(arr[this_file], type, createDataHandler(arr[this_file])); 
} 

// This is a function that returns a function. This way, the returned, inner function 
// is already scoped to the appropriate "instance of this_file". 
// The returned function becomes the "data loaded" handler of d3.tsv 
function createDataHandler(fileUrl) { 
    // This bit will be executed once per fileUrl (aka this_file) 
    // Note how when it executes, the tsv hasn't even began yet loading. 
    console.log("Create handler for " + fileUrl); 

    return function(error, data) { 
    // This bit executes once the TSV associated with each fileUrl (aka this_file) 
    // is loaded. 

    if (error) throw error; 

    //draw chart code 

    //add a graph title 
    svg.append("text") 
     .attr("x", (width/2)) 
     .attr("y", 0 - (margin.top/2)) 
     .attr("text-anchor", "middle") 
     .style("font-size", "12px") 

     // instead of this: 
     //.text(arr[this_file] + " - 1"); 

     // you get to use fileUrl: 
     .text(fileUrl + " - 1"); 
    } 
}