两个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 
});