Question

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

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"
];

然后，您可以构建一个表示这些请求的promise数组：

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

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

2 个答案: