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

Question

我正在尝试使用不同日期的 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); });


                    });

            });

提前致谢。

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 

希望这有帮助!