d3解析和绘制嵌套的csv数据

我是一名d3 noob，尝试使用以下数据创建条形图：

date, fruit, qty
1/1/14, apple, 10
1/1/14, orange, 0
1/1/14, banana, 20
1/2/14, apple, 12
1/2/14, orange, 5
1/2/14, banana, 30    
1/3/14, apple, 16
1/3/14, orange, 15
1/3/14, banana, 40

在这个条形图中，每个水果都会有一个条形图，它会以每天或csv行1秒的实时速度增长到数量的高度。我不想在点击或任何其他交互时更新。我希望酒吧自动增长

我可以很容易地使用静态数据呈现条形图，但我很难解析和循环数据。我提到了，但有点过头了

我正在尝试使用以下代码解析csv：

    var fruits;

    d3.csv("faux_data.csv", function(error, data) {
        var parse = d3.time.format("%m-%d-%y").parse;

        exams = d3.nest()
                 .key(function(d) {return d.fruit; })
                 .entries(fruits = data);

        exams.forEach(function(s) {
            s.values
             .forEach(function(d) { d.date = parse (d.date); d.qty = + d.qty; } );
        });

    });

    var svgContainer = d3.select("body")
                        .append("svg")
                        .attr("width", 400)
                        .attr("height", 300);

    var rectangles = svgContainer.selectAll("rect")
                        .data(fruits)
                        .enter()
                        .append("rect");

    var rectangleAttributes = rectangles
                        .attr("x", function (d, i) { return (i * 55);})
                        .attr("y", function(d) { return (250 - d.qty);})
                        .attr("width", 50)
                        .attr("height", function(d) {return d.qty;});

然后，我不知道如何通过更新我使用以下代码创建的rect SVG来完成此操作：

    var fruits;

    d3.csv("faux_data.csv", function(error, data) {
        var parse = d3.time.format("%m-%d-%y").parse;

        exams = d3.nest()
                 .key(function(d) {return d.fruit; })
                 .entries(fruits = data);

        exams.forEach(function(s) {
            s.values
             .forEach(function(d) { d.date = parse (d.date); d.qty = + d.qty; } );
        });

    });

    var svgContainer = d3.select("body")
                        .append("svg")
                        .attr("width", 400)
                        .attr("height", 300);

    var rectangles = svgContainer.selectAll("rect")
                        .data(fruits)
                        .enter()
                        .append("rect");

    var rectangleAttributes = rectangles
                        .attr("x", function (d, i) { return (i * 55);})
                        .attr("y", function(d) { return (250 - d.qty);})
                        .attr("width", 50)
                        .attr("height", function(d) {return d.qty;});

---

对于d3和js如何处理csv数据的任何针对noob级别的提示或明确解释，我们将不胜感激。

您的目标应该是使用setTimeout循环来重复调用更新水果或考试的函数，然后按照常规更新模式中所述更新视图。差不多

d3.csv("faux_data.csv", function(error, data) {
  setTimeout(function() {
    fruits = ... // re-nest all the data
    updateView() // render view based on the current values of fruits
  }, 500)
});

我认为您可以按照通用更新模式的建议，找出如何实现updateView。剩下的挑战是如何准备水果

首先，可以使用d3.nest的.rollup函数实现.forEach循环。这不是强制性的，但更干净。请注意，您有一个d.qty=+d.qty的bug，它可能希望变成d.qty+=d.qty

下面是使用.rollup时的外观-假设我没有错过任何东西，因为我没有在控制台中尝试过它

fruits = d3.nest()
  .key(function(d) {return d.fruit; })
  .entries(fruits = data);
  .rollup(function(values) {
    return d3.sum(values, function(d) {
      return d.qty;
    });
  });

这将汇总所有时间内每个水果的所有数量。然而，由于您希望以增量方式通过时间前进，因此需要引入一些限制，限制每次setTimeout迭代的总和。如何定义限制标准取决于您，但这里有几个想法：

  // This sums up the first 5 elements of each fruit.
  // Instead of hard-coding the 5, you can set and
  // increment a variable at each iteration
  .rollup(function(values) {
    return d3.sum(values.slice(0, 5), function(d) {
      return d.qty;
    });
  });

或

---

使用d3.sum意味着JavaScript在每次迭代中循环遍历所有数据。还有其他的方法来设置它，这样它就不会在所有这些中循环，因为实际上所需要的只是将一个新的d.qty添加到先前计算的旧d.qty的总和中。但是，除非你的数据集庞大，否则这不是一个大问题，可能不值得担心。不管怎么说，在你找到了如何用最简单的方式进行优化之后，它会更好。希望这能有所帮助。

本节涵盖了您需要了解的所有信息。还有第2部分和第3部分。请参阅本段末尾的链接。一般更新模式的内容很有用，但它并不能让我克服如何让d3通过嵌套csv前进的困惑。这可能与我微不足道的js知识有关。你能给我更多关于这个的信息吗？谢谢@meetamit，我今晚会试试，看看能不能让它运行。额外感谢您的错误捕获！