D3.js转换

我正在尝试使用d3.js创建一个动画条形图。我希望这些条像这个例子一样一个接一个地出现。我可以创建一个类似的行为，但运动从杆的高度开始，并朝x轴方向构建杆，但是我希望运动从x轴开始，并达到杆的高度，如示例所示

我的代码简化了很多：

---

任何帮助都将不胜感激

因为坐标系的原点是从左上角开始的，“y”值定位在每个条的顶部。如果“y”值是固定的，并且“高度”增加，则看起来这些条会向下生长。为了使条形从底部开始生长，您需要同时转换“y”和“高度”

这应该是你要找的，我只换了两行

chart.selectAll("rect")
 .data(data)
 .enter().append("rect")
 .attr("x", function(d, i) { return x(i) - .5; })
 .attr("y", function(d) { return h - .5; })                  //new----
 .attr("width", w)
 .transition().delay(function (d,i){ return i * 300;})
 .duration(300)
 .attr("height", function(d) { return y(d.value); })
 .attr("y", function(d) { return h - y(d.value) - .5; });    //new-----

我已经在图表底部开始了“y”值（h-0.5）。然后，在过渡时，以相同的速率增加“高度”（y（d.value）），减少“y”（h-y（d.value））。这具有将杆的底部固定到轴的效果

---

希望这有帮助

请记住，x比例与预期相反（条形图必须从底部向上构建（其中底部=svg高度）。使用Transition可在enter键上设置条形图的动画

我认为你正在努力实现的一个例子可以在这里找到：

祝你一切顺利

---

Jim

我遇到了与此类似的问题，直到我在转换（）之前也将高度设置为0。类似于：

.attr（“height”，function（d）{return 0；}）