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/

Обратите внимание, что ось по-прежнему присутствует, так что вы либо удалить и повторно добавить их или применять обновите их. Я оставляю вам эту часть.