使用新数据更新 D3 流图答案

【问题标题】：Updating D3 streamgraph with new data使用新数据更新 D3 流图
【发布时间】：2013-02-02 07:35:37
【问题描述】：

我有一个流图，我想通过更改它的数据来更新它。我有一个在数据集之间完美转换的折线图，我正在尝试为我的流图调整相同的代码，但收效甚微。我可以更改每个流的颜色，但不能更改数据。

这是我的更新行函数

  function UpdateData() {
    // Get new data
    d3.csv("data2.csv", function(data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.age = +d.age;
        });

    // Rescale range
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return Math.max(d.age); })]);

    var valueline = d3.svg.line()
        //.interpolate("interpolation")
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.age); });

    var svg = d3.select("body").transition();

    // change the line
    svg.select(".line") 
        .duration(750)
        .attr("d", valueline(data));

    svg.select(".x.axis") // change the x axis
        .duration(750)
        .call(xAxis);

    svg.select(".y.axis") // change the y axis
        .duration(750)
        .call(yAxis);
    });}

这是我对流图的相同功能的尝试...

function UpdateData() {             
    var customPalette = ["#8c564b", "#e377c2", "#7f7f7f"];        
    var colours = d3.scale.ordinal().range(customPalette);
    var nest = d3.nest().key(function(d) { return d.age; });

    // Get new data
    d3.csv("data2.csv", function(error, data) {
    data.forEach(function(d) {
            d.date = format.parse(d.date);
            d.amount = +d.amount;
        });

    var svg = d3.select("body").transition();

    var layers = stack(nest.entries(data));

        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

        svg.selectAll(".layer")
            .duration(750)
            .data(layers)
            .attr("class", "layer")
            .attr("d", function(d) { return (d.values); })
            .style("fill", function(d, i) { return colours(i); });                
        });
    }

颜色会改变，但值不会传递到图表。任何意见或建议将不胜感激！

【问题讨论】：

标签： javascript d3.js transition stream-graph

【解决方案1】：

成功！！

终于明白了。我应该定位路径本身，而不是定位层！

所以，调用你的新数据，

    // Get the data again
    d3.csv("PopulationStats/UK.csv", function(error, data) {
        data.forEach(function(d) {
            d.date = format.parse(d.date);
            d.amount = +d.amount;
        });

嵌套它

var layers = stack(nest.entries(data));

并更新您的路径。

   d3.selectAll("path")
   .data(layers)
  .transition()
   .duration(750)
   .style("fill", function(d, i) { return colours(i); })
   .attr("d", function(d) { return area(d.values); });

如此简单，但我花了 2 天时间才弄明白！

【讨论】：

我遇到了同样的问题。你能发布你的完整代码吗？

【解决方案2】：

对于发现此问题的其他人，请注意——同样的技术也适用于更新堆积面积图示例 (http://bl.ocks.org/mbostock/3885211) 中的数据。将我的头撞在电脑上整整 4 个小时，直到我偶然发现了这一点。谢谢笨蛋！

【讨论】：