Ошибка при построении гистограммы D3 с течением времени: функция рисует все значения одновременно вместо перехода

Question

Вдохновленный последними модными гонками гистограмм, такими как эти , я был заинтересован в рисовании набора горизонтальных гистограмм за определенный период времени.В отличие от гонок гистограммы, эти бары просто колеблются во времени и предназначены для того, чтобы показать изменение этих параметров с течением времени и не обходить друг друга с точки зрения позиций.

Мой нынешний подход использования задержки между итерациями цикла for и отрисовки и удаления отдельных SVGs, похоже, не работает.

Для этого я попытался использовать цикл for, который проходит по годам, и эти годы передаются в функцию рисования, которая в основном рисует гистограммы соответственно.В идеале, с задержкой в ​​цикле, я теоретически мог бы рисовать гистограммы снова и снова, показывая, как происходили изменения.Однако D3 рисует все мои графики одновременно или просто рисует одну и не позволяет мне переходить между годами.

Мои текущие временные данные существуют в этой форме

name,value,year
A, 2, 1950-51
B,-3, 1950-51
A, 3, 1951-52
B, 5, 1951-52

Моя текущая структура кода

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

        x.domain(d3.extent(data, function(d) { return d.value; })).nice();
        y.domain(data.map(function(d) { return d.name; }));

        A = ["1950-51", "1951-52"] // I just create an array with years as a hack

        for (var i = 0; i < A.length; i++) {
            sleep(3); // I have a sleep function that is supposed to act as a transition. 
            d3.select(".year"+A[i-1]).remove(); // I remove the svg of the previous year and re-draw it. 

            year = A[i]
            filteredData = data.filter(function(d) { return d.year == year })

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

            svg.selectAll(".year")
                .data(filteredData)
                .enter().append("text")
                .attr("class", "year")
                .attr("x", width / 2)
                .attr("y", 2)
                .text(function(d) { return d.year; });

            svg.selectAll(".bar")
                .data(filteredData)
                .enter().append("rect")
                .transition()
                .delay(500)
                .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); })
                .attr("x", function(d) { return x(Math.min(0, d.value)); })
                .attr("y", function(d) { return y(d.name); })
                .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
                .attr("height", 35);

            svg.selectAll(".label")
                .data(filteredData)
                .enter().append("text")
                .attr("class", "label")
                .attr("x", function(d) { return x(Math.min(0, d.value)) + 5; })
                .attr("y", function(d) { return y(d.name) + 25; })
                .text(function(d) { return d.value; })
                .style('fill', 'white');

            svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + x(0) + ",0)")
                .call(yAxis);
        }

Я ожидаю, что будет запущен постоянный цикл, показывающий переход сглаживания междубары, с годами, и бары меняются соответственно.У меня до сих пор либо собраны все столбцы всех лет, либо отображаются только данные за первый или последний год.