d3.js - 新しいデータセットを使って積み上げ棒グラフを更新する

Question

私はd3.jsから始まり、単純な積み重ねられたチャートを作成しました。

今、私はクリックで新しいデータセットでグラフを更新したいと考えています。

私はチュートリアルと、特にThinking with Joins記事、General Update Pattern例と、このstackoverflow questionに続くが、私は私の例に入力/更新/終了ロジックを適用するために管理していませんでした。

あなたはこのfiddleで見ることができるように、更新された軸は、前の1の上に配置され、グラフが新しいデータで更新されません。そこに、なぜ終了を挿入する場所を

var data1 = [ 
    {month: 'Jan', A: 20, B: 5, C: 10}, 
    {month: 'Feb', A: 30, B: 10, C: 20} 
]; 

var data2 = [ 
    {month: 'Mar', A: 10, B: 55, C: 100}, 
    {month: 'Apr', A: 10, B: 70, C: 2} 
]; 

var xData = ["A", "B", "C"]; 

var margin = {top: 20, right: 50, bottom: 30, left: 50}, 
     width = 400 - margin.left - margin.right, 
     height = 300 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
     .rangeRoundBands([0, width], 0.35); 

var y = d3.scale.linear() 
     .rangeRound([height, 0]); 

var color = d3.scale.category20(); 

var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


function draw(data) { 
    var dataIntermediate = xData.map(function (c) { 
     return data.map(function (d) { 
      return {x: d.month, y: d[c]}; 
     }); 
    }); 

    var dataStackLayout = d3.layout.stack()(dataIntermediate); 

    x.domain(dataStackLayout[0].map(function (d) { 
     return d.x; 
    })); 

    y.domain([0, 
     d3.max(dataStackLayout[dataStackLayout.length - 1], 
       function (d) { return d.y0 + d.y;}) 
     ]) 
     .nice(); 

    var layer = svg.selectAll(".stack") 
      .data(dataStackLayout); 

      layer.exit().remove(); // has no effect 

      layer.enter().append("g") 
      .attr("class", "stack") 
      .style("fill", function (d, i) { 
       return color(i); 
      }); 

    var rect = layer.selectAll("rect") 
      .data(function (d) { 
       return d; 
      }); 

      rect.exit().remove(); // has no effect 

      rect.enter().append("rect") 
       .attr("x", function (d) { 
        return x(d.x); 
       }) 
       .attr("y", function (d) { 
        return y(d.y + d.y0); 
       }) 
       .attr("height", function (d) { 
        return y(d.y0) - y(d.y + d.y0); 
       }) 
       .attr("width", x.rangeBand()); 



    svg.append("g") 
      .attr("class", "axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

    svg.append("g") 
      .attr("class", "axis") 
      .call(yAxis); 
} 

function updateData() { 
    draw(data2); 
} 

d3.select('#update') 
    .on("click", updateData); 

draw(data1); 

あなたは説明していただけますか？ は/更新/終了にロジックを入力要約する

感謝

Answer 1

。

初めてsvgを作成すると、enterの部分が新しいノードを取得し、svgに追加します。

あなたsvgを更新すると、select部分はあなたのデータとスタイルを更新します。また、exit部分は、わかっているようにデータを削除します。

だからこれに応じて、あなたのパターンはほとんど正しいですがselectあなたの新しいデータ（更新）、あなたのスタイルを更新していないとき。ここで

は、変更する必要がある部分です：

var rect = layer.selectAll("rect") 
      .data(function (d) { 
       return d; 
      }).attr("x", function (d) { 
        return x(d.x); 
       }) 
       .attr("y", function (d) { 
        return y(d.y + d.y0); 
       }) 
       .attr("height", function (d) { 
        return y(d.y0) - y(d.y + d.y0); 
       }) 
       .attr("width", x.rangeBand()); 

をそして、ここで更新フィドルです：削除し、それらを再追加または適用のいずれかので、軸はまだ存在していることhttps://jsfiddle.net/8gp8x89c/2/

注意パターンを更新することもできます。私はあなたにその部分を残します。