文字沿着一個方舟在一個圓圈包文本放置錯誤

Question

我發現堆棧溢出一個類似的問題。使用該代碼我得到了一些文本顯示，但它不在正確的位置。它離開圖表很遠，但它是彎曲的，文本的內容是正確的。

這是我的代碼和小提琴。任何幫助將是偉大的！

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 arcs = node.append("path") 
    .attr("fill", "none") 
    .attr("id", function (d, i) { return "s" + i; }) 
    .attr("d", function (d, i) { 
     return describeArc(d.x, d.y, d.r, 160, -160) 
    }); 

var arcPaths = node.append("g") 
    .style("fill", "black"); 

var labels = arcPaths.append("text") 
    .style("opacity", function (d) { 
     if (d.depth == 0) { 
      return 0.0; 
     } else { 
      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.data.key == "root" ? "" : 
    d.data.key; }) 

circle pack with textpath

Answer 1

This is what worked for me... 



    function updateSetupData(data) { 

    var countsByParent = d3.nest() 
     .key(function (d) { return d.parent + '_tbl'; }) 
     .key(function (d) { return d.SkillGroup + '_grp'; }) 
     //.key(node => node.AgtName) 
     //.rollup(function(leaves) { return leaves.length;}) 
     .entries(data); 


    var treeRoot = { 
     key: "root", 
     parent: null, 
     value: "100", 
     values: countsByParent }; 

    var root = d3.hierarchy(treeRoot, function (d) { return d.values; }) 
    .sum(function (d) { return d.value; }); 
    // .sort(function(a, b) { return b.value - a.value; }); 

    var nodes = pack(root); 

    //console.log(nodes); 

    var node = canvas.selectAll(".node") 
     .data(pack(root).descendants()) 
     .enter().append("g") 
     .attr("class", function (d) { 
      return d.data.key == null ? "node " + d.data.AgtName + " agent " : "node " + d.data.key + " cir"; 
     }) 
     .attr("id", function (d) { return d.data.AgtName + "a_" + d.data.AgtId + "_s" + d.data.skillId + "_g" + d.data.groupId }) 
     .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }) 
     .attr("fill", "steelblue") 
     .on("mouseover", function (d) { 
      highlight(d.label ? d.label : d.data.AgtName); 
     }).on("mouseout", function (d) { highlight(null); }); 

    function highlight(agtName) { 
     if (agtName == null) d3.selectAll(".node").classed("active", false); 
     else d3.selectAll(".node." + agtName).classed("active", true); 
    } 

    node.append("circle") 
     .attr("r", function (d) { return d.r; }) 
     // .attr("fill", "steelblue") 
     .attr("opacity", 0.25) 
     .attr("stroke", "#ADADAD") 
     .attr("stroke-width", "2"); 

    node 
    .append("svg:title").text(function (d) { return d.data.AgtName; }); 

    var arc = arcGenerator 
     .outerRadius(function (d, i) { return d.r; }) 
     .startAngle(0) 
     .endAngle(180); 

    node.append('defs') 
    .append('path') 
    .attr("id", function (d, i) { return "s" + i; }) 
    .attr("d", arc); 

    //.attr("d", function (d, i) { return getPathData(d.r); }); 

    node.append("text") 
     .attr("transform", "rotate(90)") 
     .attr("text-anchor", function (d) { return d.data.key == null ? 
     "start" : d.data.key.split("_") [1] === "tbl" ? "end" : "start";}) 
     .append("textPath") 
     .attr("startOffset", '50%') 
     .attr("xlink:href", function (d, i) { return '#s' + i; }) 
     .attr("fill", function (d) { return d.data.key == null ? "none" : 
     d.data.key.split("_") [1] === "tbl" ? "blue" : "black"; }) 
     .text(function (d) { 
      return d.data.key == null ? "" : 
      d.data.key == "root" ? "" : d.data.key.split("_")[0]; 
     }); 


}; 

Answer 2

的的textPathhref應該鏈接到path元素，鏈接到圈將無法正常工作。你可以沿圓圈創建一條不可見的路徑，並鏈接到textPath。看看這個例子：http://bl.ocks.org/jebeck/196406a3486985d2b92e