沿D3圆圈包装布局中的圆圈的文本

Question

我想用沿着圆圈本身流动的文本在circle pack layout中标记一些圆圈。

这是一个实验jsfiddle：

正如你所看到的，有可能呈现沿圆，在其顶部居中的文本。虽然浏览器渲染弯曲的SVG文本是可怕的。但是，让我们说我们不关心它。

这里是另一个jsfiddle

我想放置在该曲线图中弯曲的标签，在这些条件下：

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

你可以在代码本身看到我的一些尝试。我一直在努力几个小时。我的主要问题是圆中的圆现在是X Y空间中的某个位置，而在第一个jsfiddle中，所有圆都有坐标系原点中的中心。

也许你可以通过重新审视一下来帮助我。

基础数据是基于该表：

（注：这是有点关系的问题'Circle packs as nodes of a D3 force layout'我问了一天，然而，这是一个独立的实验）

我决定使用常规SVG弧代替d3.svg.arc（）。我仍然认为这是一个正确的决定。然而，这里是我现在有：:) jsfiddle

Answer 1

只是更新一些VividD的代码。

对于小于180度的弧线，describeArc函数无法正常工作，并且在函数和调用它时将起始和结束变量翻转过来。

这里是一个更新describeArc函数处理圆弧的所有备选方案，包括小弧和倒弧：

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

随着这一变化的功能应该颠倒开始和结束值被称为是更有意义：

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

Answer 2

注（因为我回答我的问题）：如果你们当中有些人已经花了在这个问题上的时间，发现另一种解决办法，请张贴，我会接受你的回答。感谢@FernOfTheAndes参与寻找此解决方案的过程，因为它充满了使用svg弧的痛苦和苦恼。

下面是解的jsfiddle：

正如注释提到的，关键部分是产生的电弧作为纯香草SVG圆弧，不经由d3.svg.arc（）。

定义弧的SVG规则很清晰，但有点难以管理。这里是an interactive explorer of svg syntax for arcs。

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;  
} 

这是实际直接生成曲面的标签代码：

而且，这两个功能在确定正确的弧线这个过程让我

var arcPaths = vis.append("g") 
    .style("fill","navy"); 
var labels = arcPaths.append("text") 
    .style("opacity", function(d) { 
     if (d.depth == 0) { 
      return 0.0; 
     } 
     if (!d.children) { 
      return 0.0; 
     } 
     var sumOfChildrenSizes = 0; 
     d.children.forEach(function(child){sumOfChildrenSizes += child.size;}); 
     //alert(sumOfChildrenSizes); 
     if (sumOfChildrenSizes <= 5) { 
      return 0.0; 
     } 
     return 0.8; 
    }) 
    .attr("font-size",10) 
    .style("text-anchor","middle") 
    .append("textPath") 
    .attr("xlink:href",function(d,i){return "#s"+i;}) 
    .attr("startOffset",function(d,i){return "50%";}) 
    .text(function(d){return d.name.toUpperCase();}) 

幸运的是，在中心文本弧线只是设置正确属性的问题。