D3中的两个csv http URL数据相同的图表

Two csv http URL data same chart in D3

本文关键字：数据 URL http 两个 D3 csv 更新时间：2023-09-26

我试图使用不同日期的D3.js组合URL Http请求中的两个或多个csv数据，但使用上面的代码只能获得第一个图表数据。怎么会这样？，我做错了什么？：

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

                    });
            });

提前谢谢。

您需要这样做来合并您的数据

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

希望这能有所帮助！

正如@Cyril所解释的，您必须组合d3.csv请求中的数据。如果你要提取任意数量的文件，你可能应该使用像Q这样的promise库来保持理智。

假设您有一个包含URL的数组：

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