相关疑难解决方法(0)

当我尝试使用D3.js库正确执行旋转动画时,我遇到了麻烦.问题与我想要旋转元素的点有关.

这是我用来表示我的意思(慢动作)的小提琴:http://jsfiddle.net/74mCb/

似乎问题的根源在于:

.attr("transform", "rotate(-60, 150,130)");

然后我像这样旋转它:

.attr("transform", "rotate(40 150,130)");

我希望针的屁股保持在适当的位置(成为旋转的中心),有人可以解释一下我做错了什么吗？

谢谢!

我在d3.js中有两个简单的物体,它们应围绕视口的中心盘旋(就像围绕太阳的行星一样).

我是d3.js的新手,我知道我必须使用过渡但是因为行星必须一直循环而不仅仅是进入或退出我不知道在哪里以及如何设置过渡.

这是我目前的代码:

var planets = [
    {d:100,r:2},
    {d:150,r:4}
];

var w = 500, h = 400, svg, circle;

function init(){

    svg = d3.select("#drawArea").append("svg").attr({width: w, height: h});

    var center = {
        x: Math.floor(w/2),
        y: Math.floor(h/2)
    };

    svg.append('circle').attr({
        'cx': center.x,
        'cy': center.y,
        'r': 10,
        'class': 'sun'
    });

    circle = svg.selectAll(".planet")
        .data(planets)
        .enter()
            .append("circle")
                .attr("class", "planet")
                .attr("r", function(s){return s.r});

    circle.attr({
        // distance from the center
        'cx': function(s){ return center.x - s.d; },
        // center of the screen
        'cy': function(s){ return center.y; } …

我正在尝试围绕其中心点在 SVG 内旋转和缩放形状。我已经研究了几个库，包括 Jquery、Greensock、D3、RaphaelJS，但我还没有找到任何提供直接方法来实现这一点的库。每个都从原点动画形状（我理解这是默认值）。我希望能够围绕其中心点旋转形状或从中心点向上或向下缩放。

这里有几个使用 Greensock 和 D3 的例子来说明默认行为：http ://jsbin.com/AHEXiPa/1/edit?html,js,output

这些示例中的每一个都从左上角进出，而不是保持静止并从三角形的中心向各个方向扩展。

我提到的库中的一个可以做到这一点，还是我应该考虑另一个库或方法？

理想情况下，我需要能够将动画/转换应用于 DOM 中的现有对象。例如，D3 擅长于此，但 Raphael 似乎需要先将 SVG 转换为 Raphael，然后再将其注入 DOM。