反转d3条形图加载动画
反转d3条形图加载动画
提问于 2021-04-28 22:02:08
我一直在使用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]));本质上，这做了它应该做的事情；它在图表加载时创建了一个动画。我唯一的问题是动画从上到下加载条，但我希望条从下到上加载。我该怎么做呢？
提前谢谢。
Stack Overflow用户
发布于 2021-04-28 22:35:51
您需要将过渡应用于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]));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67301761
复制相关文章
相似问题
腾讯云开发者
