使用新数据更新D3流图 [英] Updating D3 streamgraph with new data

问题描述

我有一个流图，我想更新它的数据。
我有一个线图，在数据集之间完美的转换，我试图适应相同的代码为我的流图，但没有成功。我可以更改每个流的颜色，但不能更改数据。

这是我的更新行函数

  function UpdateData 
 //获取新数据
 d3.csv（data2.csv，function（data）{
 data.forEach（function（d）{
 d.date = parseDate （d.date）; 
 d.age = + d.age; 
}）; 
 
 //重新调整范围
 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 .date）;}）
 .y（function（d）{return y（d.age）;}）; 
 
 var svg = d3.select （）; 
 
 //改变行
 svg.select（。line）
 .duration（750）
 .attr（d，valueline （data））; 
 
 svg.select（。x.axis）//改变x轴
 .duration（750）
 .call（xAxis）; 
 
 svg.select（。y.axis）//改变y轴
 .duration（750）
 .call（yAxis）; 
}）;} 
  

这是我为我的streamgraph 。

  function UpdateData（）{
 var customPalette = [＃8c564b，＃e377c2，＃ 7f7f7f]; 
 var colors = d3.scale.ordinal（）。range（customPalette）; 
 var nest = d3.nest（）。key（function（d）{return d.age;}）; 
 
 //获取新数据
 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（）; 
 
 
 
 
 
 
 
 ）{return d.date;}）; 
 y.domain（[0，d3.max（data，function（d）{return d.y0 + dy;}）]; 
 
 svg.selectAll（。layer）
 .duration（750）
 .data（layers）
 .attr（class，layer）
。 attr（d，function（d）{return（d.values）;}）
 .style（fill，function（d，i）{return colors（i）;}）; 
}）; 
} 
  

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

解决方案

成功！

终于得到了。

因此，请呼叫您的新资料，

  //再次获取数据
 d3.csv（PopulationStats / UK.csv，function（error，data）{
 data.forEach ）{
 d.date = format.parse（d.date）; 
 d.amount = + d.amount; 
}）; 
  
 
 
 
嵌套
  var layers = stack .entries（data））; 
  
并更新您的路径。
  d3.selectAll（path）
 .data（layers）
 .transition（）
 .duration（750）
 .style（fill，function（d，i）{return colors（i）;}）
 .attr（d，function（d）{return area（d.values）;} ）; 
  
这么简单，但花了我2天时间才能找出！
 
I have a streamgraph and I would like to update it by changing its data.
I have a line graph which transitions between data sets perfectly and I am trying to adapt the same code for my streamgraph but with little success. I can change the color of each stream but not the data. 

Here is my update line function
  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);
    });}    
Here is my attempt at the same function for my streamgraph...
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); });                
        });
    }
The colors change but the values wont pass to the graph. 
Any advice or suggestions would be hugely appreciated!!
解决方案
Success!!

Finally got it. Instead of targeting layers, I should have been targeting the paths themselves!

So, call your new data, 
    // 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;
        });
Nest it
var layers = stack(nest.entries(data));
And update your paths.
   d3.selectAll("path")
   .data(layers)
  .transition()
   .duration(750)
   .style("fill", function(d, i) { return colours(i); })
   .attr("d", function(d) { return area(d.values); });
So simple, but took me 2 days to figure out!

                        
这篇关于使用新数据更新D3流图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！