Javascript d3js滚动可见性-条形图系列动画

我正在开发一个d3应用程序，我感兴趣的是使用下面的JSFIDLE——以及onload或某个动作——撤销一个条形图逐个动画的动画

因此，第一个条将设置动画到其高度，然后是第二个条，依此类推。另外，动画的反转也会很好——所以可能是在滚动可见性上自动调用的东西

.柱状图{
/*宽度：100%；
边框：1px纯红*/
}
.条形图svg{
宽度：100%；
/*边框：1px纯绿色*/
}
巴沙特先生{
}
.条形图.轴路径{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.条形图.轴线{
填充：无；
中风：无；
形状渲染：边缘清晰；
}
.条形图.x轴路径{
显示：无；
}
.条形图.轴文本{
填充：#005a70；
}
.barchart.dark.axis文本{
填充：#ffffff；
}
.barchart.dark.轴路径{
冲程：#ffffff；
}
.条形图.条形图：悬停{
填充：#e9168a；
}
$（文档）.ready（函数（）{
控制台日志（“测试”）
var$this=$（“.barchart”）；
var w=$this.data（“宽度”）；
var h=$this.data（“高度”）；
var数据=$this.data（“数据”）；
风险值数据=[{
“标签”：“苹果”，
“价值”：100
},
{
“标签”：“梨”，
“价值”：120
},
{
“标签”：“香蕉”，
“价值”：20
}];
var配置=$this.data（“配置”）；
函数colors_google（n）{
变量颜色g=[“f7b363”、“448875”、“2b2d39”、“c12f39”、“f8dd2f”、“1b91dc”]；
返回颜色[n%颜色长度]；
}
//A根据“最大字符”标签选择图表的页边距底部
var charLabelCount=[]；
data.map（函数（d）{
var labelStr=d.label.toString（）；
charLabelCount.push（标签长度）；
})
var maxChars=charLabelCount.reduce（函数（a，b）{
返回Math.max（a，b）；
});
var bottomMarg=60；
如果（最大字符数>15）{
底部边缘=170；
}
//底限计算
var margin={顶部：15，右侧：20，底部：bottomMarg，左侧：40}，
宽度=w-边距。左侧-边距。右侧，
高度=h-边距.顶部-边距.底部；
var x=d3.scaleBand（）
.rangeRound（[0，宽度]）。填充（0.1）；
变量y=d3.scaleLinear（）
.范围（[高度，0]）；
var xAxis=d3.axisBottom（x）；
var yAxis=d3.轴左（y）；
var svg=d3.select（$this[0]）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.attr（“视图框”，“0 0”+w+“”+h）
.attr（“保存Aspectratio”、“xMidYMid会议”）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.attr（“类”、“条形图”）；
函数排序（数组、键）{
var sorted=array.sort（函数（a，b）{
返回parseFloat（b[key]）-parseFloat（a[key]）；
});
返回排序；
}
var sortedMax=45；//45作为初始值
//如果有一个配置文件——它充当一个overide——这样就可能只有一个图表——或者一组图表彼此相邻
if（配置）{
//如果它是一个比较图表——使用一个最大值，该值将在一堆同级图表中共享
if（配置[0][“maxValue”]）{
sortedMax=configurations[0][“maxValue”]+5；//添加5值缓冲区
}
}
否则{
//如果是独立图表-根据此图表自身的值调整最大值
sortedMax=sortBy（数据，“值”）[0][“值”]+5；//添加5值缓冲区
}
x、 域（data.map）（函数（d）{
返回d.标签；
}));
y、 域（[0，sortedMax]）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.selectAll（“.x.axis文本”）
.attr（“变换”、“旋转（-60）平移（-5，-5）”）
.样式（“文本锚定”、“结束”）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“x”，函数（d）{
返回x（d.标签）；
})
.attr（“宽度”，x.带宽（））
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“高度”，函数（d）{
返回高度-y（d值）；
});
});

用于触发每个矩形的动画

但是，您必须以高度为零和y为零开始每个

rect

，以便在动画中使用一些东西

$（文档）.ready（函数（）{
控制台日志（“测试”）
var$this=$（“.barchart”）；
var w=$this.data（“宽度”）；
var h=$this.data（“高度”）；
var数据=$this.data（“数据”）；
风险值数据=[{
“标签”：“苹果”，
“价值”：100
},
{
“标签”：“梨”，
“价值”：120
},
{
“标签”：“香蕉”，
“价值”：20
}
];
var配置=$this.data（“配置”）；
函数colors_google（n）{
变量颜色g=[“f7b363”、“448875”、“2b2d39”、“c12f39”、“f8dd2f”、“1b91d”
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<div 
    class="barchart" 
    data-role="barchart" 
    data-width=300
    data-height=400 
    data-data="x"
    data-configurations=""
>
</div>

<style>
    .barchart{
        /*width:100%;
        border: 1px solid red;*/
    }

    .barchart svg{
        width:100%;
        /*border: 1px solid green;*/
    }

    .barchartg{

    }

    .barchart .axis path{
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .barchart .axis line {
        fill: none;
        stroke: none;
        shape-rendering: crispEdges;
    }

    .barchart .x.axis path {
        display: none;
    }

    .barchart .axis text{
        fill: #005a70;
    }

    .barchart.dark .axis text{
        fill: #ffffff;
    }
    .barchart.dark .axis path{  
        stroke: #ffffff;
    }

    .barchart .bar:hover {
        fill: #e9168a;
    }

</style>


<script>

    $(document).ready(function() {
        console.log("test")

        var $this = $(".barchart");

        var w = $this.data("width");
        var h = $this.data("height");
        var data = $this.data("data");

        var data = [{
            "label": "Apples",
            "value": 100
        },
        {
            "label": "Pears",
            "value": 120
        },
        {
            "label": "Bananas",
            "value": 20
        }];

        var configurations = $this.data("configurations");

        function colores_google(n) {
            var colores_g = ["#f7b363", "#448875", "#2b2d39", "#c12f39", "#f8dd2f", "#1b91dc"];
            return colores_g[n % colores_g.length];
        }

        //asess the margin bottom for the chart based on the max char label
        var charLabelCount = [];
        data.map(function(d) { 
            var labelStr =  d.label.toString();
            charLabelCount.push(labelStr.length); 
        })
        var maxChars = charLabelCount.reduce(function(a, b) {
            return Math.max(a, b);
        });

        var bottomMarg = 60;
        if(maxChars > 15){
            bottomMarg = 170;
        }
        //bottom margin calculation

        var margin = {top: 15, right: 20, bottom: bottomMarg, left: 40},
            width = w - margin.left - margin.right,
            height = h - margin.top - margin.bottom;

        var x = d3.scaleBand()
            .rangeRound([0, width]).padding(0.1);

        var y = d3.scaleLinear()
            .range([height, 0]);

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

        var svg = d3.select($this[0])
            .append("svg")
            .attr("width", w)
            .attr("height", h)
            .attr("viewBox", "0 0 "+w+" "+h)
            .attr("preserveAspectRatio", "xMidYMid meet")
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .attr("class", "barchartg");

        function sortBy(array,key){
            var sorted = array.sort(function(a, b) {
                return parseFloat(b[key]) - parseFloat(a[key]);
            });
            return sorted;
        }

        var sortedMax = 45;//45 as an initial value

        //if there is a configuration file - it acts as an overide -- this is so there could be just one chart -- or a set of charts next to each other
        if(configurations){
            //if its a comparison chart -- use a max value that will be shared amongst a stack of sibling charts
            if(configurations[0]["maxValue"]){
                sortedMax = configurations[0]["maxValue"] + 5;//add 5 value buffer
            }
        }
        else{
            //if its a stand alone chart - adjust the max val by this chart's own values
            sortedMax = sortBy(data, "value")[0]["value"] + 5;//add 5 value buffer
        }

        x.domain(data.map(function(d) { 
            return d.label; 
        }));

        y.domain([0, sortedMax]);

        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

        svg.selectAll(".x.axis text")  
                .attr("transform", "rotate(-60) translate(-5,-5)")
                .style("text-anchor", "end");

        svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("");

        svg.selectAll(".bar")
          .data(data)
        .enter().append("rect")
          .attr("class", "bar")           
          .attr("fill", function(d, i) { 
            return colores_google(i);
          })
          .attr("x", function(d) { 
            return x(d.label); 
          })
          .attr("width", x.bandwidth())
          .attr("y", function(d) { 
            return y(d.value); 
          })
          .attr("height", function(d) { 
            return height - y(d.value); 
          });
    });

</script>

.transition()
  .delay(function (d,i){ return i * 300;})        
  .duration(250)

svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar") 
  .transition()
  .delay(function (d,i){ return i * 300;})        
  .duration(250)
      .attr("fill", function(d, i) { 
        return colores_google(i);
      })
      .attr("x", function(d) { 
        return x(d.label); 
      })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { 
        return y(d.value); 
      })
      .attr("height", function(d) { 
        return height - y(d.value); 
      })