兩個CSV HTTP URL數據D3

Question

同一圖表

我想兩個或多個CSV數據使用不同的代碼天，但與D3.js上面只拿到第一張圖data.How能做到這一點URL Http請求結合？ ，我做錯了什麼？：

d3.csv("https://website.com/entry.csv?start=2015-11-30%2020:30:00&end=2015-12-01%2008:30:00", 
     function (error, data) { 
      data.forEach(function (d) { 
       d.date = (d.created_at); 
       d.value = +d.field1; 
      }); 
      d3.csv("https://website.com/entry.csv?start=2015-12-01%2020:30:00&end=2015-12-02%2008:30:00", 
       function (error, data1) {      
        data1.forEach(function (d) { 
         d.date1 = (d.created_at); 
         d.value1 = +d.field1;       
        }); 

    //How to edit this line to avoid chart the two csv url data?  x.domain((data).map(function (d) { return (d.date); }));     
        y.domain([0, d3.max(data, function (d) { return d.value; })]); 


        svg.append("g") 
         .attr("class", "x axis") 
         .attr("transform", "translate(0," + height + ")") 
         .call(xAxis) 
         .selectAll("text") 
         .style("text-anchor", "end") 
         .attr("dx", "-.9em") 
         .attr("dy", "-.55em") 
         .attr("transform", "rotate(-90)"); 

        svg.append("g") 
         .attr("class", "y axis") 
         .call(yAxis) 
         .append("text") 
         .attr("transform", "rotate(-90)") 
         .attr("y", 6) 
         .attr("dy", ".71em") 
         .style("text-anchor", "end") 
         .text("Nº Personas"); 
//Or edit the next part of code to avoid chart the two csv data?  
         svg.selectAll("bar") 
         .data(data) 
         .enter().append("rect") 
         .style("fill", "steelblue") 
         .attr("x", function (d) { return x(d.date); }) 
         .attr("width", 14) 
         .attr("y", function (d) { return y(d.value); }) 
         .attr("height", function (d) { return height - y(d.value); }); 


        }); 

      }); 

在此先感謝。

Answer 1

你必須這樣做是爲了您的數據合併

data.forEach(function (d) { 
       d.date = (d.created_at); 
       d.value = +d.field1; 
      }); 
      d3.csv("https://website.com/entry.csv?start=2015-12-01%2020:30:00&end=2015-12-02%2008:30:00", 
       function (error, data1) {      
        data1.forEach(function (d) { 
         d.date1 = (d.created_at); 
         d.value1 = +d.field1;       
        }); 
        data.push(data1);//adding the data1 to data 
        //flatten the array since data array holds data1 array within it. 
        data = [].concat.apply([], data); 
        //continue with your processing 

希望這有助於！

Answer 2

由於@Cyril解釋，您必須將數據從d3.csv的要求結合起來。如果你要提取任意數量的文件，你可能應該使用一個承諾庫如Q來保持理智。

假設你有一個包含一個數組的網址：

var urls = [ 
    "https://website.com/entry.csv?start=2015-11-30%2020:30:00&end=2015-12-01%2008:30:00", 
    "https://website.com/entry.csv?start=2015-12-01%2020:30:00&end=2015-12-02%2008:30:00" 
]; 

你就可以建立代表這些請求承諾的數組：

var promises = urls.map(function(url) { 
    return Q.nfcall(d3.csv, url); 
}); 

，然後將它們結合起來，以產生最終數據：

Q.all(promises).then(function(arrays) { 
    // when all reuqests have resolved, combine the results 
    var data = [].concat.apply([], arrays); 
    return data; 
}).then(function(data) { 
    // build your chart here 

    data.forEach(function (d) { 
     d.date = (d.created_at); 
     d.value = +d.field1; 
    }); 

    x.domain((data).map(function (d) { return (d.date); }));     
    y.domain([0, d3.max(data, function (d) { return d.value; })]); 

    // and so on 
});