Eu sou novo no D3 e estou tentando exibir um gráfico de barras d3 simples que altera quais atributos de dados estão visualizando com base em um menu suspenso - os dados permanecem os mesmos e eu estou exibindo os mesmos rótulos (eixo x) a cada Na lista suspensa, apenas os rótulos devem fazer a transição / alterar sua ordem e os valores da barra devem fazer a transição / alterar com base em qual atributo estão sendo exibidos.

Quando o menu suspenso muda, no entanto, a seleção de transição (atualização) não está sendo chamada - é chamada somente quando o gráfico é carregado pela primeira vez. Portanto, com base no código, o eixo y está alterando seus valores numéricos, mas as alturas sempre permanecem as mesmas que são iniciadas para que as barras não sejam animadas, apesar da alteração dos rótulos.

updateChart(menuSelection) { // called when dropdown selection changes, and initially upon page load with default menuSelection
    // I sort the data by the attribute of the dropdown item selected
    this.myData.sort(function(a,b){
        if(menuSelection == 1) return b.count - a.count;
        else if(menuSelection == 2) return b.positiveCount - a.positiveCount;
        else return b.negativeCount - a.negativeCount;
    });

    var m = this.myData.length;
    var svg = d3.select(".chart"),
        margin = {top: 40, right: 25, bottom: 40, left: 25},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;
    var g = svg.select("g.rectGroup").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("class", "rectGroup");
    if(g.empty()) {
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("class", "rectGroup");
    }

    var x = d3.scaleBand()
        .domain(myData.map(function(d) { return d._id; }))
        .range([0, width])
        .padding(0.08);

    var yMax = d3.max(this.myData, function(d) {
        if(this.menuSelection == 1) return d.count;
        else if(this.menuSelection == 2) return d.positiveCount;
        else return d.negativeCount;
    });
    var y = d3.scaleLinear()
        .domain([0, yMax])
        .range([height, 0]);

    var xAxis = d3.axisBottom()
        .scale(x);
    var yAxis = d3.axisLeft()
        .scale(y);

    var yz = getHeights(m, menuSelection, this.myData); // ARRAY OF HEIGHTS DEPENDING ON MENU DROP DOWN SELECTION

    var bars = g.selectAll(".bar")
        .data(this.myData, function(d) {
            return d._id; // KEY IS ITEM NAME FOR OBJECT CONSTANCY; ALL ITEMS ARE DISPLAYED REGARDLESS OF ATTRIBUTE SELECTED, BUT ORDER/VALUES CHANGE FOR EACH ITEM
        })
        .enter().append("rect")
        .attr("class", "bar")
        .attr("height", 0)
        .attr("y", height);

    bars.transition().duration(700)
        .attr("x", function(d) { return x(d._id); })
        .attr("width", x.bandwidth())
        .attr("y", function(d, i) { return y(yz[i])})
        .attr("height", function(d, i) {
            return height - y(yz[i])
        });

    bars.exit().remove();

    svg.selectAll(".axis").remove();

    var height_to_use = +svg.attr("height") - margin.bottom
    var xAxis_g = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(" + margin.left + "," + height_to_use + ")")
        .call(xAxis)
        .selectAll(".tick text")
        .call(wrap, x.bandwidth());

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(yAxis);

    function getHeights(m, menuSelection, data) {
      var values = [];
      for (var i = 0; i < m; ++i) {
        if(menuSelection == 1) {
          values[i] = data[i].count;
        } else if(menuSelection == 2) {
          values[i] = data[i].positiveCount;
        } else {
          values[i] = data[i].negativeCount;
        }
      }
      return values;
    }
}