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

href的{{1}}应该链接到textPath元素，指向圈子的链接将不起作用。您可以沿着圆创建一条不可见的路径，并链接到path中的路径。看看这个例子：http://bl.ocks.org/jebeck/196406a3486985d2b92e

Answer 2

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


};

沿圆圈方舟的文字文字放置错误

2 个答案: