Question

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

以下是一个实验jsfiddle：

enter image description here

如您所见，可以沿着圆圈呈现文本，以其顶部为中心。虽然浏览器的曲线SVG文本渲染很糟糕。但是，假设我们不关心它。

这是另一个jsfiddle

enter image description here

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

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

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

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

基础数据基于此表：

enter image description here

（注意：这与我前几天询问的问题'Circle packs as nodes of a D3 force layout'有些相关，但这是一个独立的实验。）

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

enter image description here

Answer 1

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

以下是解决方案的jsfiddle：

enter image description here

正如评论中所提到的，关键部分是生成弧形作为普通的香草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();})

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

Answer 2

只需更新一些VividD的代码。

describeArc函数对于小于180度的弧没有正常工作，并且在函数和调用它时触发了开始和结束变量。

这是一个更新的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);

D3圆圈包布局中的圆圈文字

2 个答案: