5

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

这是一个实验性的 jsfiddle：

在此处输入图像描述

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

这是另一个jsfiddle

在此处输入图像描述

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

  • 圆圈代表一个省（只有深度==1）（不列颠哥伦比亚省、阿尔伯塔省等）
  • 该省所有儿童人数的总和（即分配的议会席位数量）大于 5。
  • 省名应全部大写。

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

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

基础数据基于此表：

在此处输入图像描述

（注意：这与我前几天问的问题“圆包作为 D3 力布局的节点”有些相关，但这是一个独立的实验。）

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

在此处输入图像描述

4

2 回答 2

7

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

这是解决方案的jsfiddle：

在此处输入图像描述

正如评论中提到的，关键部分是将弧生成为普通的 svg 弧，而不是通过 d3.svg.arc()。

SVG 定义弧的规则很明确，但有点难以管理。这是arcs 的 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;       
}

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

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

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

于 2014-01-21T16:10:29.250 回答
2

只是更新了一些 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);
于 2017-03-23T21:21:47.347 回答