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)) + ")";
  });

演示here。我还改变了样式，以便您可以看到文本，它出现在圆圈的中间。

在d3.js中使用文本锚点动画形状

1 个答案: