Question

这是我的fiddle。我有一个中心馅饼，圆周环绕。直到现在一切都很好。但是现在我想把文字和图像放到所有小圆圈上。当我添加文字时，它从中心不均匀。

对于这个问题，我想，我应该一次抽几个，每个象限并相应地调整宽度。但是我的小圆圈总数是可变的，因此我不知道每个圆圈有多少个圆圈在一个特定时间的象限。我希望有一个更优雅的解决方案，我可能已经错过了。如果有人愿意分享。

sub_circle.append('text')
    .attr('class', 'labels')
    .text(function (d) {
    return d.name;
})
    .attr('x', function (d, i) {
    return (350 * Math.cos(scale_arcs_parent(i)) + 500);
})
    .attr('y', function (d, i) {
    return (350 * Math.sin(scale_arcs_parent(i)) + 350);
})

Answer 1

您所看到的是文本锚点与中心的距离相同，但由于其相对于文本的位置发生变化，因此看起来好像文本的距离不同。你可以通过根据角度设置text-anchor来缓解这种情况。

.attr("text-anchor", function(d, i) {
        var a = scale_arcs_parent(i);
        if(a < Math.PI/4) return "start";
        if(a < 3*Math.PI/4) return "middle";
        if(a < 5*Math.PI/4) return "end";
        if(a < 7*Math.PI/4) return "middle";
        return "start";
 })

完成jsfiddle here。您可以明显调整锚值的阈值以满足您的需求。

Answer 2

您尚未准确描述文本的显示方式（例如，相对于圆圈的位置），所以我必须猜测。

您可以使用text-anchor和dy的组合来保持标签相对于圆圈的位置。

    sub_circle
    .append('text')
    .attr('class','labels')
    .attr('text-anchor','middle')
    .attr('dy','-30')
    .text(function(d){return d.name;})
    .attr('x',function(d,i){return (300*Math.cos(scale_arcs_parent(i))+500);})
    .attr('y',function(d,i){return (300*Math.sin(scale_arcs_parent(i))+350);})

http://jsfiddle.net/K6hvF/6/

d3如何均衡圆周上物体与中心的距离

2 个答案: