javascript - D3 圆包布局中沿圆圈的文本

Question

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

这是一个实验性的 jsfiddle :

如您所见，可以沿圆圈呈现文本，以圆圈顶部为中心。尽管浏览器对弯曲 SVG 文本的渲染很糟糕。但假设我们不关心它。

这是另一个 jsfiddle

在这些条件下，我想在此图上放置弯曲的标签:

• 圆圈代表一个省份(仅 depth==1)(不列颠哥伦比亚省、阿尔伯塔省等)
• 该省所有子级的总和(换句话说，分配的议会席位数量)大于 5。
• 省名应全部大写。

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

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

基础数据基于此表:

(注意:这与我前几天问的问题 'Circle packs as nodes of a D3 force layout' 有点相关，但这是一个独立的实验。)

我决定使用常规 SVG arcs 而不是 d3.svg.arc()。我仍然认为这是一个正确的决定。然而，这就是我现在所拥有的::) jsfiddle

Answer 1

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

这里是 jsfiddle解决方案:

如评论中所述，关键部分是将弧线生成为普通 vanilla 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();})

幸运的是，将文本居中放置在圆弧上只是设置正确属性的问题。