反转d3条形图加载动画答案

【问题标题】：Reversing d3 bar chart loading animation反转d3条形图加载动画
【发布时间】：2021-07-21 21:36:29
【问题描述】：

我一直致力于使用 d3 库在 JavaScript 中创建条形图。我想在这段代码中包含一个加载动画：

svg.selectAll("rect")
      .data(sortedPartyArray) 
      .enter()
      .append("rect")
        .style("fill", "steelblue")
        .attr('x', (s) => xScale(s[0]) + 40)
        .attr('y', (s) => yScale(s[1]) + 19.5)
        .attr('width', xScale.bandwidth())
          .attr('height', 0)  //on load animation
          .transition()
          .delay((d, i) => {return i*50})
          .duration(800)
          .attr('height', (s) => height - yScale(s[1]));

基本上这就是它应该做的；它为图表加载时创建动画。我唯一的问题是动画从上到下加载栏，但我希望栏从下到上加载。我该怎么做？

提前致谢。

【问题讨论】：

标签： javascript d3.js charts

【解决方案1】：

您需要将过渡应用于 y 和 height

请仔细检查初始y - 我想应该是height + 19.5...

svg.selectAll("rect")
      .data(sortedPartyArray) 
      .enter()
      .append("rect")
        .style("fill", "steelblue")
        .attr('x', (s) => xScale(s[0]) + 40)
        .attr('y', height + 19.5)
        .attr('width', xScale.bandwidth())
        .attr('height', 0)
        .transition()
        .delay((d, i) => {return i*50})
        .duration(800)
        .attr('y', (s) => yScale(s[1]) + 19.5)
        .attr('height', (s) => height - yScale(s[1]));

【讨论】：