Javascript D3圆形包装布局中沿圆形的文字

我正在尝试在

圆圈包布局中标记一些圆圈，其中包含沿圆圈本身流动的文本

这里有一个实验性的例子：


如您所见，可以沿圆的顶部居中渲染文本。尽管浏览器对曲线SVG文本的渲染非常糟糕。但假设我们不在乎它

这是另一个


在以下条件下，我希望在此图表上放置曲线标签：


圆圈代表一个省（仅深度=1）（不列颠哥伦比亚省、阿尔伯塔省等）
该省所有儿童的总人数（换句话说，分配的议会席位数）大于5
省的名称应全部大写

您可以在代码本身中看到我的一些尝试。我已经试了好几个小时了。我的主要问题是圆中的圆现在位于xy空间的某个地方，而在第一个jsfiddle中，所有圆的中心都位于坐标系原点

也许你可以帮我重新看看这个

基础数据基于此表：


（注意：这与我前几天提出的问题有些关联，但这是一个独立的实验。）

我决定使用常规SVG弧而不是d3.SVG.arc（）。我仍然认为这是一个正确的决定。然而，我现在拥有的是：）

注意（因为我在回答我的问题）：如果你们中的一些人已经花时间解决这个问题并找到了另一个解决方案，请发布它，我将接受你们的回答。感谢@FernOfTheAndes参与了找到这个解决方案的过程，因为它充满了使用svg弧的痛苦和痛苦

以下是解决方案的示例：


如评论中所述，关键部分是将弧生成为普通svg弧，而不是通过d3.svg.arc（）

定义弧的SVG规则很明确，但有点难以管理。这是

此外，这两个函数在定义正确圆弧的过程中帮助了我：

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
    return {
        x: centerX + (radius * Math.cos(angleInRadians)),
        y: centerY + (radius * Math.sin(angleInRadians))
    };
}

function describeArc(x, y, radius, startAngle, endAngle){
    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);
    var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, 1, 1, end.x, end.y
    ].join(" ");
    return d;       
}

函数极坐标（centerX、centerY、半径、角度等）{
var angleInRadians=（angleInDegrees-90）*Math.PI/180.0；
返回{
x:centerX+（半径*数学坐标（角半径）），
y：中心y+（半径*数学正弦（角度半径））
};
}
函数描述C（x，y，半径，星形，端角）{
var起点=极笛卡尔坐标（x，y，半径，端角）；
var end=极笛卡尔坐标（x，y，半径，星形）；
var arcSweep=endAngle-startAngle只是更新了一些livided的代码

对于小于180度的圆弧，describeArc函数无法正常工作，并且在调用该函数时，开始变量和结束变量被翻转

下面是一个更新的DescriberC函数，用于处理圆弧的所有备选方案，包括小圆弧和倒弧：

函数描述C（x、y、半径、星形、端角）{
var start=极笛卡尔坐标（x，y，半径，星形）；
var end=极笛卡尔坐标（x，y，半径，端角）；
var arcLength=端角-星形缠结；
如果（弧长<0）弧长+=360；
var longArc=弧长>=180？1:0；
变量d=[
“M”，开始.x，开始.y，
“A”，半径，半径，0，长弧，1，结束.x，结束.y
].加入（“”）；
返回d；
}

通过此更改，应使用更合理的反向起始值和结束值调用函数：

describeArc(d.x, d.y, d.r, -160, 160);

一个提示：由于将cx和cy属性分配给var arc，因此引发了一个异常。如果您将这两个属性注释掉，则标签会显示在左上角（您提到的协调问题）.这可能是显而易见的，而且你已经从实验中了解到了这一点，但我想指出这是一种理智的检查。是的，这是一种“发展”例如，这是正常的。：）我知道所有捆绑在那个角落的文本。这实际上是我的问题-如何把它放在正确的位置。感谢你让我注意到它，现在其他人也会知道发生了什么…：）关于attr
startOffset=“”
，他们会说：如果给出的不是百分比（这是你给它的），则“startOffset”表示在当前用户坐标系中沿路径测量的距离。在文档之后，然后一个到达。目前，这似乎是textPath元素和指定x，y坐标之间的唯一连接。希望这不是我认为这里是d3.svg.arc的兔子trail（）是一个障碍。除了在（0,0）中设置中心外，无法对其进行定义。在我看来，切换到常规SVG arc将起作用。在您修复它之前，我很快将您最新的小提琴分叉！我将存储它，以便将来绘制有关巴西Cangaço的任何故事。以下是这些家伙的一个例子：）抱歉，只是有点轻浮…工作太辛苦了…我将在这里发布此内容。与您的内容一样，其他各种各样的摆弄。为了让文本进入圆内，在仍然正确的情况下，我将路径半径设置为比圆半径小一点。我尝试使用“textLength”属性挤压文本以适应，但它似乎不适用于
元素。@AmeliaBR我刚刚将.style（“font-size”，12）更改为.attr（“font-size”，12），结果是：（）（从我的示例中一直存在错误）@AmeliaBR我想你应该把这篇文章作为一个答案，让未来的读者能够看到两种方法是很好的。@AmeliaBR我想说的是，现在有了lets say.attr（“字体大小”，8），人们可以让文本尽可能小：更新（jsfiddle.net/lividd/vCG6w）我对@lividd最新小提琴的小小贡献：。可以通过过渡和其他润色来改进，但你明白了。
describeArc(d.x, d.y, d.r, -160, 160);