d3.js - 使用新數據集更新堆疊條形圖

Question

我以d3.js開始並構建了一個簡單的堆疊圖表。

現在我希望能夠通過單擊新數據集來更新圖表。

我也跟着教程，特別是Thinking with Joins文章中，General Update Pattern例子，這stackoverflow question，但我沒有管理應用輸入/更新/退出邏輯來我的例子。

正如您在此fiddle中看到的那樣，更新後的座標軸位於前一個座標軸的頂部，並且圖表不會用新數據更新。

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/

注意，軸仍然存在，所以你要麼刪除並重新添加它們或應用更新模式給他們也。我把那部分留給你。