Javascript d3杆需要从下向上移动

这是一个d3条形图

我正在尝试动画酒吧增长从底部向上。如何实现

此外，如何使标签（即条形图的文本）保持在条形图的顶部，并随条形图一起移动

目前，酒吧开始在顶部和下降到零

d3.选择（“主体”）
.附加（“h2”）
.文本（“条形图”）；
常量数据集=[12,31,22,17,25,18,29,14,9]；
常数w=500；
常数h=120；
常量svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
变量条=svg
.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，（d，i）=>i*30）
.attr（“y”，（d，i）=>h-3*d）
.attr（“宽度”，25）
.attr（“高度”，（d，i）=>3*d）
.attr（“填充”、“海军”）；
酒吧
.transition（）
.持续时间（400）
.attr（“y”，h）
.attr（“高度”（d，i）=>3*d）；
svg
.selectAll（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.text（d=>d）
.attr（“x”，（d，i）=>i*30）
.attr（“y”，（d，i）=>h-3*d-3）
.style（“字体大小”，“25px”）
.样式（“填充”、“红色”）
.附加（“标题”）
.text（d=>d）
您的代码对于条形图几乎是正确的，您只需将矫揉造作的顺序更改为条形图的y属性，并在开始时将条形图的高度属性设置为0

我刚刚修改了您示例中的三行，并用注释标记它们，以显示要更改哪些内容以达到您想要的效果

要使标签跟随条形图，只需在其上添加具有相同持续时间的过渡！我在最后一个块中添加了一些行，并对其中一行进行了修改以达到效果

希望有帮助：）


d3.选择（“主体”）
.附加（“h2”）
.文本（“条形图”）；
常量数据集=[12,31,22,17,25,18,29,14,9]；
常数w=500；
常数h=120；
常量svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
变量条=svg
.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，（d，i）=>i*30）
.attr（“y”，h）//在此处修改
.attr（“宽度”，25）
.attr（“高度”，0）//在此处修改
.attr（“填充”、“海军”）；
酒吧
.transition（）
.持续时间（400）
.attr（“y”，（d，i）=>h-3*d）//在此处修改
.attr（“高度”（d，i）=>3*d）；
//这里稍加修改
var标签=svg
.selectAll（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.text（d=>d）
.attr（“x”，（d，i）=>i*30）
.attr（“y”，h）//在此处修改
.style（“字体大小”，“25px”）
.样式（“填充”、“红色”）；
标签
.附加（“标题”）
.text（d=>d）；
标签
.transition（）//添加到此处
.duration（400）//添加到此处
.attr（“y”，（d，i）=>h-3*d-3）//添加到此处