Question

我（使用D3）有一个圆弧，我有许多均匀间隔的点。我需要在半径上放置一些文字，这些文字穿过圆心，穿过圆弧上的点的中心。

因此，为了可视化，单位圆位置零处的文本将不会被旋转。单位圆位置90度的文本将旋转90度。 -90度的文字将旋转90 ...等。

我尝试过这样的事情。

var labelTextUpdate = this.svg
    .select('#nodes')
    .selectAll('text')
    .data(circleData, function(d) { return d.id;});

var labelTextEnter = labelTextUpdate.enter()
    .append('text')
    .style('text-anchor', 'start')
    .attr('x', function(d) { return d.coords.x;})
    .attr('y', function(d) { return d.coords.y;})
    .attr('transform', function(d) {
        return 'rotate(' + d.angle + ')';
    })
    .text(function(d) {
        return d.type;
    });

labelTextUpdate
    .transition().duration(400)
    .attr('x', function(d) { return d.coords.x;})
    .attr('y', function(d) { return d.coords.y;})
    .attr('transform', function(d) {
        return 'rotate(' + d.angle + ')';
    });

我会承认，我对D3的了解最多，但是现在的代码，减去“变换”线，将文本直接放在我想要的圆弧上的点上方它，所以我必须接近。

然而，看起来我不能将一个角度传递给transform属性？当我尝试粘贴的代码时，文本消失了。当我忘记尝试参数化角度并且只使用恒定角度时

.attr('transform', 'rotate(5)');

这似乎可以实现我文本的所需旋转，但我不希望所有文本都旋转相同的角度。

有谁知道如何修复我几乎正常工作的代码？

Answer 1

我能够弄清楚这一点。我使用旋转功能在正确的轨道上，但您还需要提供一个旋转点。

像这样的东西

.attr('transform', function(d) {
    return "rotate(" + angle + ", " + x + ", " + y + ")";
});

我猜测如果没有提供的旋转点（x，y），D3必须默认为它认为最好的猜测。最好的猜测让我的文字从我的svg区域中消失了。我不知道这是否会最终帮助任何人，但它回答了我的问题，我花了一段时间才发现旋转可以采取的额外参数。

将文本放在从圆圈D3的中心延伸的半径上

1 个答案: