Ось Y не обновляется при смене фильтра

Question

У меня есть гистограмма с выпадающим фильтром, и ось Y должна обновиться, как только я нажму на новый фильтр, но это не так, и я не уверен, почему. Столбчатая диаграмма меняется, но значения y остаются прежними. Если бы у меня была какая-либо помощь, мне бы это очень понравилось.

Здесь вы можете найти код js ниже.

d3.csv("ContinentGraph.csv", function(error, data){

// Bar chart based on selected user's row and column
var margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 400 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
    // Get every column value
    var elements = Object.keys(data[0])
        .filter(function(d){
            return ((d != "Continent"));
        });
    var selection = elements[0];

    var y = d3.scaleLinear()
            .domain([0, d3.max(data, function(d){
                return +d[selection];
            })])
            .range([height, 0]);

    var x = d3.scaleBand()
            .domain(data.map(function(d){ return d.Continent;}))
            .range([0, width]);

    var xAxis = d3.axisBottom()
            .scale(x)


    var yAxis = d3.axisLeft()
            .scale(y)

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

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height +  ")")
        .call(xAxis)
        .selectAll("text")
        .style("font-size", "10px")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", "-.55em")
        .attr("transform", "rotate(-90)" );


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

    svg.selectAll("rectangle")
        .data(data)
        .enter()
        .append("rect")
        .attr("class","rectangle")
        .attr("width", width/data.length)
        .attr("height", function(d){
            return height - y(+d[selection]);
        })
        .attr("x", function(d, i){
            return (width / data.length) * i ;
        })
        .attr("y", function(d){
            return y(+d[selection]);
        })
        .append("title")
        .text(function(d){
            return d.Continent + " : " + d[selection];
        });

    var selector = d3.select("#drop")
        .append("select")
        .attr("id","dropdown")
        .on("change", function(d){
            selection = document.getElementById("dropdown");

            y.domain([0, d3.max(data, function(d){
                return +d[selection.value];})]);

            yAxis.scale(y);

            d3.selectAll(".rectangle")
                .transition()
                .attr("height", function(d){
                    return height - y(+d[selection.value]);
                })
                .attr("x", function(d, i){
                    return (width / data.length) * i ;
                })
                .attr("y", function(d){
                    return y(+d[selection.value]);
                })
                .ease("linear")
                .select("title")
                .text(function(d){
                    return d.Continent + " : " + d[selection.value];
                });

            d3.selectAll("g.y.axis")
                .transition()
                .call(yAxis);

         });

    selector.selectAll("option")
      .data(elements)
      .enter().append("option")
      .attr("value", function(d){
        return d;
      })
      .text(function(d){
        return d;
      })


});

Я также добавил на снимке экрана, как выглядит гистограмма , Как выглядит гистограмма

Также здесь находится CSV-файл (не уверен, как правильно разместить его здесь)

Continent,Max Quantity of Oil Spilled (tonnes),Total Sum Quantity of Oil Spilled (tonnes),Max Amount of Compensation  ,Total Sum of Compensation,Average Quantity of Oil Spilled (tonnes),Average Amount of Compensation,Number of Fund Type,Total Number of Unique Oil Type,Total Number of Incident,Total Number of Unique Cause of Incident
Africa,1000,1015,2952759.42,3000834.3,253.75,750208.575,2,2,4,4
Asia,29000,114033.24,3282511421,5027934340,1226.163871,54063810.11,2,8,93,11
Europe,84000,366649,261391882.7,1336112575,8332.931818,30366194.89,2,5,44,11
North America,110000,220499,164650765.2,180331907.9,20045.36364,16393809.81,2,4,11,7
South America,3600,3985.2,17914901.91,44601931.78,996.3,11150482.95,2,2,4,4

Answer 1

Хорошо, я понял это!

Мне просто нужно было заменить

 .ease("linear")

на

.ease(d3.easeLinear) 

, так как я использую v4, а .ease - это v3