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

Question

我試圖在circle pack layout標記一些圓圈，文本沿着圓圈本身流動。

這是一個實驗性的jsfiddle ：

如您所見，可以沿着圓圈渲染文本，以其頂部為中心。 雖然瀏覽器的曲線SVG文本渲染很糟糕。 但是，讓我們說我們不關心它。

這是另一個jsfiddle

在這些情況下，我想在此圖表上放置彎曲標簽：

• 圓圈代表一個省（只有深度== 1）（不列顛哥倫比亞省，阿爾伯塔省，等等）
• 所有兒童的規模總和（換句話說，分配的議會席位數）大於5。
• 該省的名稱應該都是大寫的。

您可以在代碼本身中看到我的一些嘗試。 我已經嘗試了幾個小時。 我的主要問題是圓圈中的圓圈現在位於XY空間中的某個位置，而在第一個jsfiddle中，所有圓圈都具有坐標系原點的中心。

也許你可以通過重新審視來幫助我。

基礎數據基於此表：

（注意：這與我前幾天詢問的'圓形包作為D3力布局的節點'的問題有些相關，但這是一個獨立的實驗。）

我決定使用常規SVG弧而不是d3.svg.arc（）。 我仍然認為這是一個正確的決定。 但是，這就是我現在擁有的：:) jsfiddle

Answer 1

注意（因為我正在回答我的問題）：如果你們中的一些人已經花時間解決這個問題並找到了另一個解決方案，請發布它，我會接受你的回答。 感謝@FernOfTheAndes參與找到這個解決方案的過程，因為它充滿了與svg弧一起工作的痛苦和痛苦。

這是解決方案的jsfiddle ：

正如評論中所提到的，關鍵部分是產生弧形作為普通的香草svg弧，而不是通過d3.svg.arc（）。

用於定義弧的SVG規則很明確，但有點難以管理。 這是一個用於弧的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();})

幸運的是，在弧上居中文本只是設置正確屬性的問題。

Answer 2

只是更新一些VividD的代碼。

對於小於180度的弧，describeArc函數無法正常工作，並且在函數和調用時都會觸發start和end變量。

這是一個更新的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);