Eu sou novo em javascript e d3js. Eu gostaria que um objeto DOM traçasse um caminho especificado por uma curva parametrizada (x (t), y (t)). Aqui está um exemplo dessa parametrização:

var theta = [];
        for(var i = 0; i <= N; i++){
        theta.push(2*Math.PI*i/N);
    }
var points = [];
    for(var i = 0; i <= N; i++){
        points.push([Math.cos(theta[i]),Math.sin(theta[i])]);
    }

A descrição acima é a parametrização de uma curva - neste caso, também um círculo - e eu gostaria que meu objeto DOM seguisse a trajetória dessa curva. [Além: existe alguma maneira melhor de definirpoints? Parece ridículo executar um loop for.]

Uma maneira grosseira de obter o tipo de efeito que estou procurando é executar um loop for na parte update () do d3. Primeiro, simplesmente anexo um círculo à variável svg, para que ela não precise ser vinculada a nenhum dado. Em seguida, é selecionado e atualizado sem a necessidade de entrar / sair.

        for (var i = 0; i <= N; i++){
        svg.selectAll("circle")
                .transition()
                .attr("cx",points[i][0]+w/2) // w: width
                .attr("cy",points[i][1]+h/2) // h: height
                .duration(dt) // 
                .delay(dt*i);
            }

[Além disso: ouvi fila () seria melhor, em vez de calcular o atraso total. Comentários?] No entanto, a propriedade de facilitação da transição faz com que ela seja executada de maneira irregular. Imagino que não poderia especificar nenhuma flexibilização, mas tenho certeza de que deve haver uma maneira melhor de conseguir o que quero, que é simplesmente para o objeto DOM inicial (o círculo) se mover suavemente ao longo de uma trajetória específica.

No final, eu gostaria de fazer isso para vários objetos DOM que eventualmente serão vinculados a dados, cada um com uma curva específica a seguir. Alguma dica de como eu faria isso?

Agradeço antecipadamente por qualquer ajuda e terei todo o prazer em receber conselhos, incluindo referências.