javascript - 向下滑动 SVG 元素的简单方法？

Question

是否有与 SVG 元素的 jQuery 的 SlideDown 方法等效的方法？现在这些元素突然出现。我想通过滑下来来软化一点。

编辑:我的代码基于此处的动态堆积条形图:http://benjchristensen.com/2011/12/16/dynamic-stacked-bar-chart-using-d3-js/

我有很多只有一个条的图表，而不是一张有很多条的图表。我想让它当图表出现时，它会慢慢地滑落。

Answer 1

我不认为 jQuery 能轻易支持 SVG。基思·伍德有一个 SVG specific jQuery library不过，这允许你做一些动画。

另一种选择是使用适用于 SVG 的图形库。第一个想到的是D3.js ，它提供了一些非常易于使用的方法来操作 SVG 元素。此外，选择器样式与您可能习惯的 jQuery 类似。

如果您使用 D3，我会查看 transition方法。您可以做很多事情，而且 D3 非常强大。一个例子是:

var rect = d3.select('#rectangle');
// this selects a rectangle.  Let's say that it starts at 
// the origin, or even off screen in your case   

rect.transition()
    .duration(250)
    .attr('x', 10)
    .attr('y', 20); 
    // this changes the x and y attributes
    // of the rectangle to 10 and 20 respectively
    // using a transition over a 250ms duration.

对于您给出的特定示例，我只需更改 y 属性，以便它从屏幕开始(例如 y = -1 * height)，然后转换它降低到 y = height 或 y = 200 或类似的值。