Анимация фигур с текстовым якорем в d3.js

Question

Я пытаюсь перевести круг в точку на кривой, и каждый круг имеет текстовый узел внутри круга в качестве дочернего узла, и я перехожу к позиции cx, cy круг, и я бы хотел, чтобы текст был с ним связан, но он остается в центре svg.

mainLayerGroup.selectAll('.layerG') 
    .append('circle') 
    .attr('class', 'innerC') 
    .attr('cx', 0) 
    .attr('cy', 0) 
    .attr('fill', 'black') 
    .attr('r', layerRadius - 7) 
    .transition() 
    .duration(1000) 
    .delay(500) 
    .ease('bounce') 
    .attr('cx', function (d, i) { 
    return (width/2 - layerRadius - strokeWidth) * Math.cos((step * i) * Math.PI/180);}) 
    .attr('cy', function (d, i) { 
    return (width/2 - layerRadius - strokeWidth) * Math.sin((step * i) * Math.PI/180);}); 

mainLayerGroup.selectAll('.layerG') 
    .append('text') 
    .text(function(d){ 
    return d; 
    }) 
    .attr("class", "layerTitle") 
    .attr("text-anchor", "middle") 
    .attr('font-size', '36px') 
    .attr('color', 'black'); 

here's the fiddle

Любая помощь приветствуется и если есть улучшения в моей текущей реализации, то обратная связь также оценили :-) Я довольно новыми для d3.js

Answer 1

легче поставить все до g элементов, а затем перевести их, а не все элементы отдельно. То есть, ваши элементы будут добавлены так.

var subGroup = mainLayerGroup.selectAll('g') 
    .data(dataset) 
    .enter() 
    .append('g') 
    .attr('class', 'layerG'); 

subGroup 
    .append('circle') 
    .attr('class', 'outerC') 
    .attr('fill', 'none') 
    .attr('stroke', 'black') 
    .attr('stroke-width', strokeWidth) 
    .attr('r', layerRadius) 

// more elements appended... 

Тогда вы можете перевести все, как это:

subGroup.transition() 
    .duration(1000) 
    .delay(500) 
    .ease('bounce') 
    .attr('transform', function (d, i) { 
    return "translate(" + ((width/2 - layerRadius - strokeWidth) * Math.cos((step * i) * Math.PI/180)) + "," + ((width/2 - layerRadius - strokeWidth) * Math.sin((step * i) * Math.PI/180)) + ")"; 
    }); 

Demo here. Я также изменил стиль, чтобы вы могли видеть текст, и он появляется в середине кругов.